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本 书 针 对 HTML 5 技术 进行 深入 剖析 和 全 面 讲解 ,内 容 涵盖 HTML 5 语义 特性 .HTML 5 Form 表 
单 .Canvas 和 SVG 绘图 、 多 媒体 API\ 本 地 存储 、 文 件 API、Server-Sent Events、WebSocket 和 Notification 
通信 ,离线 应 用 .XMLHttpRequest Level 2、Web Worker 多 线程 .Geolocation 位 置 定 位 等 技术 。 

由 于 HTML 5 中 的 部 分 技术 需要 使 用 服务 端 来 运行 , 故 推荐 HBuilder 工具 进行 编码 。 在 HBuilder 
工具 中 内 置 一 个 小 型 服务 器 ,在 浏览 页 面 时 服务 器 将 自动 启动 ,操作 简单 . 易 用 。 关 于 Server-Sent Events、 
WebSocket、 离 线 应 用 和 XMLHttpRequest Level 2 等 技术 需要 与 服务 端 进行 交互 ,本 书 应 用 案例 中 分 别 使 
用 Java Web 和 Node.js 作为 服务 端 技术 来 实现 客户 端 和 服务 端 之 间 的 数据 交互 。 
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随 着 HTML 5 规范 和 ECMAScript 8 标准 的 正式 发 布 , 大 量 的 前 端 业务 逻辑 极 大 地 增 
加 了 前 端的 代码 量 ,前 端 代 码 的 模块 化 、 按 需 加 载 和 依赖 管理 势 在 必 行 ,因此 Web 前 端 开发 
技术 越 来 越 被 人 们 重视 。HTML 5 作为 Web 前 端 开 发 的 基石 ,是 前 端 和 后 端 开 发 者 必 备 
的 技能 ,目前 绝 大 部 分 前 端 框 架 都 是 基于 HTML 5 技术 。 

本 书 在 HTML、CSS 和 JavaScript 语言 基础 上 ,重点 阐述 HTML 5 语义 特性 .HTML 5 
Form 表单 .Canvas 和 SVG 绘图 、 多 媒体 API、 本 地 存储 、 文 件 API、 Server-Sent Events、 
WebSocket 和 Notification 通信 、 离 线 应 用 .XMLHttpRequest Level 2、Web Worker 多 线 
程 .Geolocation 位 置 定位 等 技术 。 

本 书 不 再 是 知识 点 的 铺陈 ,而 是 致力 于 将 知识 点 融入 案例 中 ,在 案例 设计 上 力求 贴 合 实 
际 需求 。 本 书 特色 是 结构 清晰 ,针对 知识 点 从 [语法 【示例 】 【案例 ] 三 个 层次 进行 递 进 式 
学 习 , 能 够 从 初学 者 角度 出 发 ,对 每 个 知识 点 深入 分 析 并 阶梯 式 层 层 强化 ,让 读者 对 知识 点 
从 入 门 到 精通 ,Step-By-Step 脚踏实地 学 习 编 程 技术 。 除 此 之 外 ,每 章 配 有 本 章 目 标 、 本 章 
总 结 和 本 章 练 习 , 目 标明 确 , 便 于 及 时 总 结 和 复习 。 通 过 本 书 的 学 习 , 读 者 能 够 快速 理解 并 
掌握 各 项 重点 知识 ,全 面 提高 分 析 问 题 .解决 问题 以 及 动手 编码 的 能 力 。 

本 书 既 可 作为 高 等 院 校本 ,专科 计算 机 相关 专业 的 教材 ,也 可 作为 社会 培训 教材 ,是 一 
本 适合 初学 者 学 习 和 参考 的 读物 。 

本 书 免费 提供 以 下 配套 资源 : 

各 教学 PPT 

如 课 后 练习 答案 

名 教学 大 纲 

名 考试 大 纲 

名 案例 源 代码 

如 重点 案例 视频 讲解 

注意 : 案例 源 代码 和 重点 案例 视频 讲解 请 先 扫描 封底 刊 刮 卡 中 的 二 维 码 进行 注册 ,再 
扫描 书 中 二 维 码 获取 。 

作者 团队 均 具 有 十 年 以 上 的 项 目 开发 和 教学 经 历 ,拥有 丰富 的 教学 经 验 和 实践 经 验 , 曾 
先后 研发 和 出 版 “高 等 院 校 软件 专业 方向 ”系列 教材 和 “在 实践 中 成 长 ”系列 教材 ,编写 并 出 
版 了 教材 产品 26 种 、 实 训 教学 产品 7 种 ,涉及 HTML 5、Java、Android、. NET、 大 数据 多 个 
领域 。 

由 于 时 间 有 限 , 书 中 难免 有 下 漏 和 不 足 之 处 ,县 请 广大 读者 及 专家 不 音 赐教 ,欢迎 发 送 
邮件 到 workemail6@163. com。 
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。 了解 HTML 5 发 展 历程 及 新 特性 。 

。 了 解 浏览 器 对 HTML 5 的 支持 情况 。 
。 掌握 HTML 5 标记 方式 的 改进 。 

。 熟悉 HTML 5 的 新 增 元 素 。 

。 熟悉 HTML 5 全 局 属性 。 





1.1 HTML 5 概述 


自 20 世纪 90 年 代 HTML(CHypertext Markup Language, 超 文本 标记 语言 ) 诞 生 以 来 ， 
先后 经 历 了 数 个 版 本 。 当 用 户 访问 服务 器 中 的 文本 、 图 片 声音 .视频 等 内 容 时 ,通过 浏览 器 
客户 端 对 服务 器 返回 的 HTML 内 容 进行 解析 ,并 以 友好 的 形式 呈现 给 用 户 。 

由 于 浏览 器 的 标准 不 统一 ,导致 浏览 器 兼容 性 问题 尤为 突出 ,即使 同一 浏览 器 的 多 个 版 
本 之 间 也 存在 较 大 差异 ,如 Internet Explorer( 后 简称 IE)6、7、8 等 版 本 。 为 了 解决 浏览 器 
的 兼容 性 问题 ,HTML 5 应 运 而 生 , 它 的 出 现 对 Web 应 用 来 说 意义 重大 , HTML 5 的 目标 
是 成 为 一 个 更 加 强大 的 HTML 规范 标准 。 


1.1.1 HTML 5 发 展 历程 


在 HTML 4.01 版 本 时 ,业界 普遍 认为 HTML 已 经 穷 途 末路 ,Web 标准 的 焦点 也 从 
HTML 转移 到 了 XML 和 XHTML 上 ,HTML 逐渐 处 于 次 要 位 置 ,W3CCWorld Wide Web 
Consortium 万维网 联盟 ) 组 织 专注 于 XHTML 2. 0 标准 的 研究 与 制定 。 

为 了 推动 HTML 5 标准 ,2004 年 由 Opera、Apple、Google 和 Mozilla 等 浏览 器 厂商 共 
同 成 立 了 WHATWG 组 织 (Web Hypertext Application Technology Working Group), 该 
组 织 致力 于 Web Form 和 Web Application API 的 开发 ,并 为 浏览 器 厂商 提供 开放 式 合作 。 

2006 年 W3C 决定 停止 XHTML 方面 的 工作 ,开始 与 WHATWG 进行 合作 ,创建 了 一 
个 新 的 HTML 版 本 ,并 于 2008 年 发 布 HTML 5.0 工作 草案 。 

HTML 5.0 于 2010 年 正式 推出 ,立即 受到 全 球 各 大 浏览 器 厂商 的 热烈 欢迎 与 支持 ,并 
以 惊人 的 速度 被 推广 与 使 用 。 同 年 1 月 .YouTube 开始 提供 HTML 5 视频 播放 器 ; 4 月 ， 
苹果 公司 创始 人 乔布斯 公开 宣布 全 面 弃 用 Flash, 使 得 更 多 公司 开始 关注 HTML 5。 到 目 
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前 为 止 ,世界 排名 前 100 的 网 站 中 90% 以 上 已 采用 HTML 5 技术 进行 改版 。 
2016 年 10 月 ,W3C 正式 发 布 HTML 5. 1 版 本 ,并 于 2017 年 底 完成 HTML 5. 2 版 本 
的 修订 。 


ss。 万 维 网 联盟 (World Wide Web Consortium,W3C) ,又 称 W3C 理事 会 ,于 1994 年 10 
馈 。 月 在 麻 省 理工 学 院 (MIT) 计 算 机 科学 实验 宝 成 立 , 黄 创 建 者 是 万 维 网 的 发 明 者 Tim 
Berners-Lee。W3C 是 Web 技术 领域 最 具 权威 和 影响 力 的 国际 中 立 性 技术 标准 机 
构 ,该 机 构 制 定 了 一 系列 标准 并 督促 Web 应 用 开发 者 和 内 容 提供 者 遵循 这 些 标准 。 


1.1.2 HTML 5 八大 特性 


HTML 5 不仅 是 HTML 规范 的 最 新 版 本 ,而 且 是 一 系列 用 于 页 面 设计 的 相关 技术 的 
总 称 ,主要 包含 HTML 5 核心 规范 、CSS(Cascading Styles Sheets) 层 于 样式 表 和 JavaScript 
脚本 技术 。 

HTML 5 核心 规范 用 于 定义 标记 内 容 的 元 素 , 并 明确 其 含义 。CSS 用 于 控制 标记 内 容 
的 呈现 形式 。JavaScript 则 用 来 操作 HTML 文档 内 容 , 以 及 用 户 的 事件 响应 处 理 。 除 此 之 
外 ,HTML 5 新 增 的 部 分 元 素 具有 编程 设计 特性 ,需要 通过 JavaScript 来 实现 。 

HTML 5 的 出 现 , 对 于 Web 的 发 展 意义 重大 ,其 新 技术 特征 主要 表现 在 语义 特性 、 离 
线 存储 特性 .设备 访问 特性 .通信 特性 ` 多 媒体 特性 .三 维 及 图 形 特性 性 能 与 集成 特性 、 
CSS 3 特性 等 方面 ,在 W3C 官方 网 站 中 (https://www. w3. org/html/logo/) 提 供 了 各 种 技 
术 对 应 的 图 标 ,如 图 1-1 所 示 。 
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图 1-1 HTML 5 八大 特性 对 应 的 图 标 


HTML 5 中 所 支持 的 八大 特性 具体 如 下 。 

1) 语义 特性 (Semantics) 

HTML 5 通过 一 组 丰富 的 页 面 标签 (如 article、 section、aside 等 ), 更 好 地 实现 了 
HTML 的 结构 化 和 语义 化 ,以 便于 搜索 引擎 的 抓 取 。 

2) 离线 存储 特性 (Offline Storage) 

HTML 5 AppCache、Web Storage、Indexed DB 和 File API 等 离线 存储 技术 ,使 得 Web 
应 用 程序 启动 时 间 更 短 、 加 载 速度 更 快 ,并 具有 离线 操作 等 能 力 。 

3) 设备 访问 特性 (Device Access) 

从 Geolocation API 文档 公开 以 来 ,HTML 5 为 网 页 应 用 开发 者 提供 了 更 友好 的 功能 
选择 ,具有 更 多 体验 功能 的 优势 。HTML 5 中 的 设备 感知 能 力 有 所 增强 ,使 得 Web 程序 也 
可 以 实现 传统 应 用 的 功能 ,如 使 用 Orientation API 来 访问 重力 感应 。Web 应 用 可 以 直接 
与 浏览 器 内 部 的 数据 相连 ,如 在 音频 、 视 频 方面 可 直接 与 MicroPhones、 摄 像 关 相连 
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4) 通信 特性 (Connectivity) 


通信 能力 的 增强 使 得 基于 页 面 程序 的 实时 性 更 高 游戏 体验 更 加 流畅 。HTML 5 拥有 
更 有 效 的 服务 器 推送 技术 Server-Sent Events 和 Web Socket, 使 得 客户 端 和 服务 器 之 间 的 
通信 效率 达到 了 前 所 未 有 的 高 度 。 

5) 多 媒体 特性 (Multimedia) 

HTML 5 中 新 增 了 对 Audio 和 Video 原生 态 多 媒体 的 支持 ,浏览 器 允许 直接 播放 音频 
和 视频 文件 ,无 须 借助 第 三 方 视频 插件 (如 Flash 插件 等 ) 播 放 视 频 。 

6) 三 维 及 图 形 特性 (3D Graphics &. Effects) 

基于 SVG、Canvas、WebGL 及 CSS 3 中 的 3D 功能 ,使 得 图 像 泻 染 变 得 高 效 方便 ,并 呈 
现 惊人 视觉 效果 ,在 图 表 、2D/3D 游戏 方面 应 用 比较 广泛 。 

7) 性 能 与 集成 特性 (Performance && Integration) 

Web Worker 技术 使 得 浏览 器 支持 多 线程 和 后 台 任 务 处 理 , 而 XMLHttpRequest 
(Level 2) 技 术 使 得 跨 域 请 求 与 表单 操作 更 加 简单 。 

8) CSS 3 特性 (Cascading Stylesheet Level 3) 

在 保证 性 能 和 语义 结构 的 前 提 下 ,CSS 3 提供 了 更 多 的 样式 风格 和 更 强 的 视觉 效果 。 
CSS 3 中 提供 了 圆 角 、 半 透明 、 阴 影 \ 渐 变 、 多 背景 等 特效 ,具有 CSS 3 强大 的 选择 器 、 变 形 动 
画 等 新 特征 ,可 轻松 实现 页 面 中 的 各 种 特效 。 





1.2 HTML 5 现状 


目前 HTML 5 核心 标准 仍 在 完善 之 中 ,这 意味 着 某 些 新 特性 可 能 在 将 来 的 HTML 5. X 
版 本 中 得 到 支持 。 目 前 大 部 分 浏览 器 都 能 较 好 地 对 HTML 5 进行 支持 ,但 并 不 是 所 有 浏览 
器 都 完全 支持 HTML 5 新 特性 。 在 实际 项 目 中 使 用 某 个 特性 时 ,应 该 先 检查 一 下 浏览 器 对 
该 特性 的 支持 情况 。 有 些 浏览 器 (如 Chrome 和 Firefox) 会 持续 更 新 ,每 次 更 新 都 会 加 入 新 
特性 或 修补 点 丝 漏 。 鉴 于 Chrome 和 Firefox 能 够 较 好 地 支持 HTML 5, 本 书 所 有 案例 可 使 
用 Chrome 或 Firefox 浏览 器 查看 效果 。 

HTML 5 对 屏幕 的 适 配 性 较 好 ,通过 一 套 代码 和 资源 适 配 多 种 设备 屏幕 ,并 对 屏幕 旋 
转 等 效果 提供 较 好 的 处 理 。HTML 5 能 够 简单 地 嵌入 视频 .音频 等 多 媒体 资源 ,2010 年 4 
月 苹果 公司 开始 全 面 弃 用 Flash 插件 , 转 而 通过 HTML 5 解决 视频 播放 问题 。 

HTML 5 在 地 理 定位 方面 ,充分 发 挥 移动 设备 定位 的 优势 ,通过 综合 使 用 BDS、GPS、 
WiFi 等 技术 使 得 手机 定位 更 加 准确 ,推动 LBS 应 用 服务 的 发 展 。 


1.2.1 浏览 器 对 HTML 5 的 支持 情况 


针对 IE、Chrome、Firefox、Opera、Safari 等 主流 Web 浏览 器 的 发 展 策略 调查 ,目前 各 大 
浏览 器 厂商 在 HTML 5 支持 方面 都 采取 了 相应 的 措施 。 

谷歌 在 2010 年 2 月 19 日 宣布 将 放弃 对 Gears 浏览 器 插件 项 目的 支持 ,进而 转向 
HTML 5 项目 ; 2017 年 1 月 谷歌 网 络 和 DoubleClick 数字 营销 产品 完全 弃 用 Flash, 所 有 广 
告 全 部 使 用 HTML 5 格式 。 微 软 也 于 2010 年 3 月 16 日 在 拉 斯 维 加 斯 市 举行 的 MIX 10 大 
会 上 宣布 IE 9 将 更 多 地 支持 CSS 3、SVG 等 HTML 5 互联 网 通用 标准 。 目 前 Edge 版 本 对 
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HTML 5 的 支持 度 达到 490 项 (共计 555 项 ) ,其 他 浏览 器 的 支持 情况 见 表 1-1。 
表 1-1 各 浏览 器 对 HTML 5 的 支持 程度 


























浏览 器 及 版 本 所 支持 的 项 数 
Chrome 52 492 
Firefox 48 480 
Microsoft Edge 14 490 
Safari 10.0 383 
Opera 37 489 
IE 11 312 
IE 10 265 
IE 9 113 





自 2000 年 开始 ,微软 ,谷歌 .苹果 、Mozilla 等 主流 浏览 器 厂商 对 HTML 5 的 支持 度 逐 
年 提升 ,如 图 1-2 所 示 。 


500 


8 目 


Score (points) 


Jan 2009 Jan 2010 Jan 2011 Jan 2012 Jan 2013 Jan 2014 Jan 2015 Jan 2016 Jan 2017 
Year(a) 
Chrome 全 Edge 时 Firefox 各 Opera 平 Safari 


图 1-2 浏览 器 对 HTML 5 的 支持 情况 


1.2.2 检查 浏览 器 支持 情况 


目前 大 部 分 浏览 器 都 能 较 好 地 支持 HTML 5, 但 不 是 所 有 的 浏览 器 都 完全 支持 HTML 
5 的 新 特性 。 在 实际 项 目 中 使 用 某 个 特性 时 ,应 该 先 检查 一 下 浏览 器 对 该 特性 的 支持 情况 。 
在 开发 过 程 中 ,通常 使 用 以 下 几 种 形式 来 检查 浏览 器 对 HTML 5 的 支持 情况 。 

1. 检测 浏览 器 对 某 个 HTML 5 元 素 的 支持 情况 

通过 http://caniuse. com 网 站 来 检查 对 HTML 5 元 素 的 支持 情况 ,在 搜索 栏 中 输入 需 
要 检查 的 HTML 5 元 素 ,将 会 列 出 各 主流 浏览 器 对 该 元 素 的 支持 情况 。 例 如 ,输入 SQLite 
时 ,检查 结果 如 图 1-3 所 示 。 

2. 检测 某 浏 览 器 对 HTML 5 的 支持 情况 

通过 http://html5test. com/ 网 站 来 检测 某 浏 览 器 对 HTML 5 的 支持 情况 。 打 开 
html5test 网 站 时 ,将 会 检测 当前 浏览 器 对 HTML 5 支持 程度 的 得 分 情况 以 及 各 项 支持 详 
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情 列表 , 即 哪些 项 在 浏览 器 中 得 到 支持 ,哪些 项 还 未 得 到 支持 。 例 如 ,使 用 Chrome 浏览 器 
打开 html5test 网 站 时 ,所 给 出 的 评估 指标 如 图 1-4 所 示 。 


Web SQL Database a unorF Global 8163% 


Method of storing data client-side, allows Sqlite database queries 
for access and manipulation 


[Garon aire ae oa sw 





图 1-3 浏览 器 对 SQLite 的 支持 情况 


回 rrvtstest-Howwel x 几 
€ GC | © html5testcom 








全 
Hm 加 TesT how well your browser support htmi5? 


oter omer ewe | evesen | seo re est 





JavaScript Diagrams| 


YOUR BROWSER SCORES n20 ITIF55POINTS | (NS 


You are using Chrome Dev 62.0.3202.75 on Windows 7 ER 











器 Compare io 


会 semantics Cimultimedia 


Parsing rules 5 Video 


《IDOCTYPE htnl> triggers standards mode Yes v video element 


HTML5 tokenizer Yes Subtitles 
HTML5 tree building Yesv Audio track selection 





1-4 Chrome 浏览 器 对 HTML 5 的 支持 情况 


在 other browsers 项 中 ,分 别 列 出 了 desktop browsers、tablets 和 mobiles 等 设备 对 常 
规 浏 览 器 各 个 版 本 的 支持 情况 。 

3. 检查 HTML 5 内 容 是 否 完全 符合 HTML 5 规范 

通过 https://validator. w3. org/ 网 站 来 检测 网 络 中 的 页 面 、 本 地 页 面 或 HTML 代码 段 
是 否 符合 HTML 5 规范 。W3C 网 站 提供 了 Validate by URI、Validate by File Upload 和 
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Validate by Direct Input 三 种 检查 形式 。 当 在 检验 框 输入 HTML 代码 段 时 ,检查 结果 如 
图 1-5 所 示 。 
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《/head> 呈 


《body> 一 

xn: 《input type=“text” placeholder=“ 请 输入 直播 类 型 ”list=“fileTypeList"/》 
br 
9 《datalist id=“fileT tie > 
《option Value=“ </option> 呈 
《option value= 2 《yaption>e 
《option value=“ “甘泉 /option? 呈 

《/datalist>e 


Used the HTML parser 
Total execution time 2 milliseconds. 





1-5 检查 HTML 代码 段 


1.3 HTML 5 的 变化 


HTML 5 规范 遵循 "HTML 设计 原则 ”, 本 身 并 不 是 革命 式 的 发 展 ,没有 完全 放弃 之 前 
版 本 中 的 规范 ,而 是 在 之 前 版 本 的 基础 上 提供 向 前 的 最 大 兼容 ,以 保障 现 有 互联 网 页 面 能 够 
正常 浏览 ,使 得 Web 页 面 能 够 平稳 地 过 渡 到 HTML 5 时 代 。 


1.3.1 HTML 5 标记 方式 的 改进 


HTML 5 语法 是 为 了 保证 与 之 前 的 HTML 语法 达到 最 大 程度 的 兼容 而 设计 的 。 虽 然 
HTML 5 进行 了 一 定 的 改进 ,但 是 其 内 容 类 型 和 文件 扩展 名 仍然 保持 不 变 ,文件 类 型 
(ContentType) 为 text/html, 文 件 的 扩展 名 为 . htm 或 . html。 

HTML 5 的 语法 相对 于 XHTML 进行 了 一 些 改进 ,其 规范 相对 更 加 宽松 ,可 最 大 限度 
兼容 之 前 各 版 本 的 HTML 页 面 。 

1. DOCTYPE 声明 

通常 DOCTYPE 声明 位 于 文档 的 第 一 行 ,用 于 指明 当前 文档 使 用 的 HTML 或 
XHTML 版 本 ,例如 , 当 网 页 使 用 HTML 4. 01 Strict 版 本 时 ,DOCTYPE 声明 方式 如 下 。 

【示例 】 HTML 4.01 Strict 文档 类 型 声明 


<!DOCTYPE html PUBLIC " - //W3C//DTD HTML 4.01//EN" 
"http://www. w3.org/TR/htm14/strict. dtd"> 


当 网 页 使 用 XHTML 1. 0 Strict 版 本 时 ,DOCTYPE 声明 方式 如 下 。 
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【示例 】 XHTML 1.0 Strict 文档 类 型 声明 


<! DOCTYPEhtmlPUBLIC " — //W3C//DTD XHTML 1.0 Strict//EN" 
"http://www. /TR/xhtml1/DTD/xhtml1 - strict. dtd"> 


HTML 5 规范 相对 比较 宽松 ,主要 是 对 以 往 版 本 进行 兼容 ; 在 DOCTYPE 声明 中 , 没 
有 刻意 声明 具体 的 版 本 号 ,而 是 作为 通用 版 本 适用 于 所 有 的 HTML 版 本 。 
【示例 】 HTML 5 文档 类 型 声明 


<!DOCTYPE html> 


2. 字符 编码 的 指定 
在 HTML 中 ,通过 < meta > 标签 来 指定 页 面 的 字符 编码 格式 。 
【示例 】 指定 HTML 网 页 的 编码 格式 


<meta http - equiv = "Content ~ Type" content = "text/html;charset =utf - 8" /> 


在 HTML 5 中 ,使 用 < meta > 标签 的 charset 属性 更 加 简单 地 指定 页 面 的 字符 编码 
格式 。 
【示例 】 HTML 5 文档 编码 格式 的 指定 


<meta charset = "utf 一 8"> 


3. 标签 不 区 分 大 小 写 

XHTML 规范 要 求 比较 严格 ,标签 名 必须 用 小 写字 母 。 而 HTML 5 中 相对 比较 宽松 ， 
允许 开始 标签 与 结束 标签 的 大 小 写 不 匹配 。 

【示例 】 HTML 5 标签 不 区 分 大 小 写 


< span > 前 后 标签 允许 大 小 写 不 一 致 </Span > 
< span > 前 后 标签 允许 大 小 写 不 一 致 </SPAN > 


4. 可 以 省 略 的 标签 

在 HTML 5 中 ,标签 分 为 “不 允许 写 结束 标签 “可 以 省 略 结束 标签 "和 “开始 标签 和 结 
束 标签 均 可 省 略 ? 三 种 类 型 。 

不 允许 写 结束 部 分 的 标签 是 指 不 允许 使 用 "< 标签 ></ 标 签 >" 形 式 , 只 能 使 用 "< 标签 />” 
单 标签 形式 ,常见 的 标签 有 area、 base、br、col、hr、img、input, link、meta、 param、embed、 
keygen \track .source 等 。 


【示例 】 不 允许 写 结束 部 分 的 标签 


<meta charset = "UTF — 8"> 

< link rel = "stylesheet" type = "text/css" href = "theme.css" /> 
< img src= "img. jpg" /> 

<br /> 
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可 以 省 略 结束 部 分 的 标签 有 dt、dd、li、p、rt、rp、option、optiongroup、colgroup、thead、 
tbody ,tfoot tr\tdvth 等 。 
【示例 】 可 以 省 略 结束 部 分 的 标签 


<ul> 
<1i> 技 术 类 型 </4i> 
<1i> 娱 乐 类 型 </4i> 
< 1i > 游戏 类 型 </4i> 
</ul> 


开始 标签 和 结束 标签 均 可 省 略 的 有 html、head、body、tbody、thead、colgroup 等 。 
【示例 】 开始 标签 和 结束 标签 均 可 省 略 的 标签 
<table border = "1"> 


<thead> 
< th> 表 格 头 部 </th> 


< td> 表 格 内 容 部 分 </td> 


</table> 


5. boolean 属性 的 设置 

在 HTML 5 中 ,boolean 类 型 的 属性 有 checked selected ,multiple readonly 和 disabled 
等 ; 当 只 写 属 性 而 不 指定 属性 值 时 ,属性 值 默认 为 true; 当 属性 值 与 属性 名 相同 或 属性 值 为 
空 字符 串 时 ,该 属性 值 也 为 true; 当 需 要 将 属性 值 设 为 false 时 ,省 略 不 写 该 属性 即 可 。 

【示例 】 boolean 类 型 的 属性 





<! -- 只 写 属 性 不 写 属性 值 时 ,该 属性 为 true, 文 本 框 处 于 禁用 状态 --> 
< input type = "text" value = "文本 框 ” disabled/> 

<! -- 属性 值 与 属性 名 相同 时 ,该 属性 为 true, 文 本 框 处 于 禁用 状态 --> 
< input type= "text" value= "文本 框 " disabled = "disabled" /> 

<! -- 属性 值 为 空 字符 串 时 ,该 属性 为 true, 文本 框 处 于 禁用 状态 --> 
< input type = "text" value = "文本 框 " disabled = ""/> 

<! -- 不 提供 该 属性 时 ,该 属性 为 false, 文本 框 处 于 可 用 状态 --> 

< input type = "text" value = "文本 框 ”/> 


6. 属性 引号 

XHTML 按照 XML 的 严格 规范 ,要 求 属性 值 必须 使 用 单 引号 (') 或 双 引 号 (") 括 起 来 。 
而 HTML 5 在 此 基础 上 进行 了 改进 , 当 属 性 不 包含 一 些 特 殊 字符 (如 空 字 符 串 <、>, 王 、 单 
引号 、 双 引号 等 ) 时 ,引号 可 以 省 略 。 

【示例 】 属性 引号 的 使 用 


< img src = broadcast_live. jpg alt = 直播 图 片 > 
< img src = "broadcast live" alt = "broadcast live 图 片 " > 
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< img src = 'broadcast live'alt = 'broadcast live 图 片 '> 
< 一 以 下 写法 错误 一 > 
< img src = broadcast live. jpg > 


1.3.2 HTML 5 废弃 的 元 素 


由 于 各 种 原因 ,HTML 5 废弃 了 许多 元 素 , 在 页 面 设计 时 可 以 通过 其 他 方式 来 实现 。 
1. 使 用 CSS 替代 的 元 素 
HTML 中 的 basefont big ,center ,font、strike、s、tt、u 等 元 素 主 要 用 于 对 页 面 风 格 进行 





修饰 ,而 HTML 5 倡导 使 用 CSS 样式 代替 以 上 元 素 实 现 页 面 修饰 ,使 得 数据 与 样式 分 离 更 
加 彻底 .HTML 元 素 嵌 套 更 少 , 更 加 符合 网 页 设计 原则 。 


2. 不 再 使 用 frame 框架 
使 用 frameset、frame 和 noframes 元 素 能 够 对 页 面 进行 分 割 , 通 过 frame 方式 来 加 载 公 


共 资 源 可 方便 代码 后 期 维护 。 但 由 于 frame 框架 不 便于 搜索 引擎 的 抓 取 与 优化 , 故 HTML 5 
中 不 再 支持 frame 框架 ,只 支持 iframe 框架 。 


Pr 


全 > 


县 发 时 ,可 以 通过 include 方式 来 加 载 公共 资源 ; 在 前 端 框架 (如 VueJS、AngularJS 或 


虽然 在 HTML 5 中 不 再 支持 frame 框架 ,但 在 服务 器 端 (如 JSP、.PHP 或 .NET) 开 


ReactJS 等 ) 开 发 过 程 中 多 采用 模块 化 模式 进行 开发 ,也 可 以 非常 方便 地 实现 公共 资 
源 的 加 载 。 


3. 只 有 部 分 浏览 器 支持 的 元 素 
由 于 bgsound 和 marquee 元 素 只 有 IE 浏览 器 支持 ,而 applet 元 素 需 要 Java 环境 支持 ， 


事先 安装 配置 相对 比较 烦琐 , 故 它们 在 HTML 5 中 被 废除 。applet 元 素 可 由 embed 或 
object 元 素 代替 ,bgsound 元 素 可 由 audio 元 素 代 替 ,marquee 元 素 可 由 JavaScript 编程 来 
实现 。 


1.3.3 HTML 5 新 增 的 元 素 


针对 语义 特性 ,HTML 5 规范 新 增 了 article、section、aside、headerfooter、nav 和 figure 


等 结构 元 素 。 除 了 结构 元 素 外 ,HTML 5 规范 还 增加 了 一 些 其 他 元 素 。 例 如 ,video 元 素 用 
于 定义 视频 ,audio 元 素 用 于 定义 音频 ,embed 元 素 用 于 插入 各 种 多 媒体 ,mark 元 素 用 于 突 


出 显 


示 或 高 亮 显 示 文 字 ,progress 表示 运行 中 的 进程 ,time 元 素 表示 时 间或 日 期 ,canvas 元 


素 用 于 绘制 图 形 等 ,具体 请 参见 本 书 附录 A。 


1.4 HTML 5 全 局 属性 


在 HTML 5 规范 中 新 增 了 “全 局 属性 ”概念 ,是 指 在 页 面 中 所 有 的 元 素 均 可 使 用 的 属 


性 ,如 contenteditable、contextmenu、spellcheck、data- * 和 draggable 等 属性 。 


1. contenteditable 属性 
contenteditable 属性 的 功能 是 允许 用 户 编辑 元 素 中 的 内 容 , 当 单 击 元 素 时 向 用 户 提供 
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一 个 插入 符号 ,提示 用 户 可 以 对 该 元 素 的 内 容 进行 编辑 。contenteditable 属性 最 初 由 微软 
开发 ,后 来 得 到 大 部 分 浏览 器 的 支持 ,并 被 HTML 5 规范 所 采用 。 

contenteditable 属性 具有 一 个 隐藏 的 继承 (inherit) 状 态 , 当 属 性 为 true 时 表示 元 素 处 
于 可 编辑 状态 , 当 属 性 为 false 时 表示 元 素 处 于 不 可 编辑 状态 ; 当 元 素 未 指定 























contenteditable 属性 时 ,元 素 的 状态 由 inherit 来 决定 , 即 父 元 素 可 编辑 时 子 元 素 也 可 编辑 。 
【案例 1-1】 contenteditable. html 
<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "UTF — 8"> 画 区 CT] 
<title> contenteditable 属性 </title> 案 例 视 频 讲解 
</head> 
<body> 


<div id= "container" contenteditable= "true"> 


<p> 这 是 一 个 可 编辑 的 段落 .</p> 
<div> contenteditable 属性 用 于 规定 元 素 内 容 是 否 可 编辑 .</div> 


<div id= "containerStatus"></div > 


</div><hr/> 
<div> 


< input type = "button" value = "可 编辑 ”onclick = "editable()"> 
< input type= "button" value = "不 可 编辑 "onclick = "uneditable() "> 


</div> 
< script type = "text/javascript"> 


function editable( ){ 
document. getElementById( "container") 
.setAttribute( "contenteditable", "true" ); 
document. getElementById( "containerStatus"). innerHTML 
= "container 容器 的 编辑 状态 为 :" + container. isContentEditable; 
} 
function uneditable( ){ 
document. getElementById( "container") 
. setAttribute("contenteditable", "false" ); 
document. getElementById( "containerStatus"). innerHTML 
= "container 容器 的 编辑 状态 为 :" + container. isContentEditable; 
} 


</script > 


</body> 


</html > 


上 述 代 码 中 , 单 击 “ 可 编辑 ”按钮 ,container 容器 处 于 可 编辑 状态 ; 单 击 “不 可 编辑 ” 按 
钮 ,container 容器 处 于 不 可 编辑 状态 。 

2. contextmenu 属性 

contextmenu 属性 是 HTML 5 新 增 的 属性 ,用 于 为 指定 的 元 素 提供 上 下 文 菜单 ; 在 元 
素 上 右 击 时 会 弹出 上 下 文 菜单 。 目 前 只 有 Firefox 浏览 器 支持 contextmenu 属性 ,其 他 浏览 


器 暂 不 支持 。 


通过 menu 元 素 实现 上 下 文 菜单 ,其 中 label 属性 用 于 指定 菜单 的 可 见 内 容 ,type 属性 
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用 于 指定 菜单 的 类 型 。 菜 单项 是 通过 menuitem 元 素来 实现 的 ,其 中 label 属性 用 于 指定 菜 
单项 的 可 见 内 容 ,icon 属性 用 于 指定 菜单 项 的 图 标 。 
【案例 1-2】 contextmenu. html 





<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "UTF 一 8"> 回 
<title> contenteditable 属性 </title> 案例 视频 讲解 
</head> 
< style type = "text/css"> 
#container{ 
width:300px; 
height:200px; 
border:2px solid saddlebrown; 
background: lightgray; 





} 
</style> 
<body> 
<div id= "container" contextmenu = "mymenu"></div> 
<menu type = "context" id= "mymenu"> 
< menuitem label = "娱乐 频道 "onclick = "alert( ' 娱 乐 频道 ');" 
icon = "images/entertainment. png"></menuitem> 
< menuitem label = "游戏 频道 "onclick = "alert( ' 游 戏 频道 ');" 
icon = "images/game. png"></menuitem > 
<menu label = "技术 专场 "> 
<menuitem label = "Web 前 端 技术 " icon = "images/technology. png"> 
</menuitem> 
<menu label = "大 数据 "> 
<menuitem label = "Hadoop 专场 "icon = "images/hadoop. png" 
onclick = "alert( 'Hadoop 专场 ');"></menuitem> 
<menuitem label = "Spark 专场 ”icon = "images/spark. png" 
onclick = "alert('Spark 专场 ');"></menuitem> 
</menu> 
</menu> 
</menu> 
</body> 
</html > 


在 Fivefox 浏览 器 中 运行 上 述 代码 ,效果 如 图 1-6 所 示 ; 在 div 元 素 上 右 击 时 ,会 弹出 一 
个 三 级 菜单 ; 单 击 某 个 菜单 项 ,弹出 相应 的 提示 信息 。 

3. data- * 属性 

data- * 属性 用 于 存储 页 面 或 应 用 程序 的 自 定义 数据 ,为 所 有 HTML 元 素 提供 携带 
data 数据 的 能 力 。 通 过 JavaScript 来 获取 元 素 的 data 数据 并 进行 处 理 , 有 效 地 避免 了 Ajax 
调用 和 服务 端的 数据 库 查 询 ,提高 了 用 户 的 体验 感 。 

当 使 用 data-* 属性 时 ,属性 名 中 不 能 包含 任何 大 写字 母 , 且 在 “data-” 前 级 之 后 至 少 有 

-个 字符 ; 当 浏 览 器 解析 HTML 代码 时 ,完全 忽略 带 有 前 级 “data-” 的 自 定义 属性 。 当 通过 
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1-6 ”contextmenu 菜单 


JavaScript 获取 数据 时 ,可 以 使 用 getAttribute() 方 法 或 dataset 属性 来 获得 data 数据 ; 在 
使 用 dataset 获取 数据 时 ,忽略 前 级 “data-” 部 分 ,如 通过 dataset. title 形式 来 获得 data-title 
属性 中 的 data 数据 。 

【案例 1-3】 data-attribute. html 


<div id = "container"> 
<p class= "plot" data - title = "密谋 场景 " data - src = "conspire. jpg"> 密 谋 场景 </p> 
<p class= "plot" data - title = "搞笑 场景 " data - src = "amuse. jpg"> 搞 笑 场景 </p> 
</div> 
<hr /> 
<div id = "photoWall"> 
<div id= "phone"></div> 
<div id= "description"></div> 
</div> 
< Script> 
var plots = document. getElementsByTagName("p" ); 
for(var i in plots){ 
plots[i].onclick = function showImage(){ 
var photoWall = document. getElementById( "phone" ); 
var description = document. getElementById("description"); 
//phone. innerHTML = "< img src = 'images/" 
// +this.getAttribute("data- src")+"'/>"; 
//description. innerHTML = "< h2 >" 
// +this.getAttribute("data- title")+"</h2>" 
phone. innerHTML = "< img src = 'images/" + this. dataset. src + "'/>"; 
description. innerHTML = "< h2 >" + this. dataset. title+ "</h2>" 
} 


plots[i]. onmouseover = function(){ 
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this. style. backgroundPosition = 'left — 36px'; 
} 
plots[i]. onmouseout = function(){ 
this. style. backgroundPosition = 'left top'; 
} 
人 
</script> 


上 述 代 码 运行 结果 如 图 1-7 所 示 , 当 鼠标 移入 或 移出 “密谋 场景 "或 “搞笑 场景 "时 ,文本 
的 背景 图 片 将 会 发 生 改 变 ; 当 单 击 * 密 谋 场景 或 “搞笑 场景 "文本 时 ,使 用 JavaScript 读 取 
文本 标签 对 应 的 data- * 属性 ,获取 附加 数据 后 进行 数据 处 理 ,将 data-src 属性 中 所 提供 的 
图 片 路 径 信 息 显示 出 来 。 





LSJLEIGT ¥ 


中 contenteditable 尾 性 
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搞笑 场景 





图 1-7 data-* 属性 


4. spellcheck 属性 

spellcheck 属性 用 于 指定 是 否 对 元 素 ( 如 文本 框 ` 可 编辑 元 素 等 ) 进 行 拼写 检查 和 请 法 
检查 。 当 该 属性 为 true 时 表示 对 元 素 进行 拼写 和 语法 检查 ; 当 属 性 为 false 时 不 对 元 素 进 
行 检 查 。 

【案例 1-4】 spellcheck. html 


< div contenteditable = "true" spellcheck = "true"> 
jCuckoo is a good boy, Lucy is a girl. 
thi s is ju st a test 一 

</div><br /> 

< textarea spellcheck = "true"> 
rujerry? 

</textarea> 


上 述 代 码 运 行 结果 如 图 1-8 所 示 ,浏览 器 对 可 编辑 元 素 及 文本 域 中 的 内 容 进行 检查 ,对 
不 符合 要 求 的 部 分 通过 红色 波浪 线 标识 处 理 。 

5. draggable 属性 

draggable 属性 是 HTML 5 对 于 拖 放 操 作 的 支持 ,用 于 设置 元 素 是 否 允 许 被 拖 放 。 有 
关 元 素 的 拖 放 将 在 2. 4 节 进 行 介绍 。 
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jCuckoo is a good boy,Lucy is a girl. thi s isju st a test~ 


ru jerry ? 





图 1-8 ”spellcheck 拼写 和 语法 检查 


本 章 总 结 


HTML 5 是 HTML 规范 的 最 新 版 本 ,主要 包含 HTML 5 核心 规范 、CSS 层 番 样式 
表 和 JavaScript 脚本 技术 。 

HTML 5 的 八大 特性 包括 语义 特性 、 离 线 存 储 特性 、 设 备 访问 特性 、 通 信 特性 、 多 媒 
体 特 性 、 三 维 及 图 形 特性 .性 能 与 集成 特性 和 CSS 3 特性 。 

XHTML 规范 要 求 比较 严格 ,标签 名 必须 用 小 写字 母 ; 而 HTML 5 中 相对 比较 宽 
松 , 允 许 开始 标签 与 结束 标签 的 大 小 写 不 匹配 。 

HTML 5 的 语法 相对 于 XHTML 进行 了 一 些 改进 ,其 规范 更 加 宽松 ,最 大 限度 兼容 
之 前 各 版 本 的 HTML 页 面 。 

HTML 5 针对 语义 特性 新 增 了 article section ,aside header footer nav 和 figure 等 
结构 元 素 。 

在 HTML 5 规范 中 新 增 了 “全 局 属性 ”概念 ,是 指 对 页 面 中 的 任意 元 素 均 可 使 用 的 
属性 ,如 contenteditable、contextmenu、spellcheck、data-* 和 draggable 等 属性 。 
HTML 5 倡导 使 用 CSS 样式 代替 basefont、big、center 等 元 素 实现 页 面 修饰 ,使 得 
数据 与 样式 分 离 更 加 彻底 .HTML 元 素 嵌 套 更 少 ,更 加 符合 网 页 设计 原则 。 

data- * 属性 用 于 存储 页 面 或 应 用 程序 的 自 定义 数据 ,为 所 有 HTML 元 素 提供 携带 
data 数据 的 能 力 。 


本 章 练习 


和 


HTML 5 不 仅 是 HTML 规范 的 最 新 版 本 ,而且 是 一 系列 用 于 页 面 设计 的 相关 技术 


的 总 称 , 主 要 包含 。 


2. 


A. HTML 5 核心 规范 

B. CSS(Cascading Styles Sheets) 层 释 样 式 表 

C. XHTML 规范 

D. JavaScript 脚本 技术 

下 列 选项 中 描述 错误 的 是 8 

A. HTML 5 核心 规范 定义 用 于 标记 内 容 的 元 素 ,并 明确 其 含义 
B. CSS 用 于 控制 标记 内 容 的 呈现 形式 
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C. JavaScript 用 来 操作 HTML 文档 内 容 ,以 及 用 户 的 事件 响应 处 理 

D. HTML 5 是 对 HTML 标签 的 升级 ,自身 与 JavaScript 关联 不 大 

. HTML 5 对 HTML 进行 了 一 定 的 改进 ,文件 名 的 后 级 为 8 

A. htm B. html C. html5 D. xhtml 

. HTML 5 文档 类 型 声明 为 

A. <!IDOCTYPE html PUBLIC "-//W3C//DTD HTML 5//EN" 
"http://www. w3. org/ TR/html5/strict. dtd"> 

B. <!IDOCTYPE html5 PUBLIC "-//W3C//DTD HTML 5//EN" 
"http://www. w3. org/TR/html5/strict. dtd"> 

C. <IDOCTYPE html5 > 

D. <!IDOCTYPE html> 


. 在 HTML 5 的 属性 中 ,下 列 属性 不 是 boolean 类 型 。 
A. checked B. selected C. draggable D. readonly 
. 关于 HTML 5 ,下列 选 项 描述 错误 的 是 o 


A. 在 HTML 5 中 提倡 使 用 CSS 样式 代替 basefont、big、center 等 元 素 实 现 页 面 修 
饰 ,使 得 数据 与 样式 分 离 更 加 彻底 

B. 由 于 frame 框架 不 便于 搜索 引擎 的 抓 取 与 优化 , 故 HTML 5 中 不 再 支持 frame 
框架 和 iframe 框架 

C. XHTML 规范 要 求 比较 严格 ,标签 名 必须 用 小 写字 母 ; 而 HTML 5 中 相对 比较 
宽松 ,允许 开始 标签 与 结束 标签 的 大 小 写 不 匹配 

D. 在 HTML 5 中 使 用 < meta > 标签 的 charset 属性 来 指定 页 面 的 字符 编码 格式 


. 下 列 选项 中 ,不 属于 HTML 5 语义 特性 标签 的 是 o 
A. video B. article C. section D. aside 
. 关于 HTML 5 全 局 属性 说 法 错误 的 是 


A. contenteditable 属性 的 主要 功能 是 允许 用 户 编辑 元 素 中 的 内 容 , 当 在 元 素 上 单 
击 时 向 用 户 提供 一 个 插入 符号 ,提示 用 户 可 以 对 该 元 素 的 内 容 进行 编辑 

B. draggable 在 HTML 5 中 用 于 设置 元 素 是 否 可 被 拖 放 , 无 须 JavaScript 脚本 协助 

C. contextmenu 属性 是 HTML 5 新 增 的 属性 ,用 于 指定 div 元 素 的 上 下 文 菜单 ; 当 
在 div 上 右 击 时 弹出 上 下 文 菜单 

D. data-* 属性 用 于 存储 页 面 或 应 用 程序 的 自 定义 数据 ,为 所 有 HTML 元 素 提 供 
携带 data 数据 的 能 力 





HTML 5 文档 结构 | 


人 SS 本 章 目标 


。 熟悉 HTML 5 文档 结构 元 素 。 

。 熟练 使 用 article section aside 等 语义 标签 实现 页 面 布 局 。 
。 了 解 双向 隔离 、 描 述 与 摘要 、 定 义 注 释 等 元 素 。 

。 掌握 任务 进度 、 表 量 尺 及 对 话 框 等 元 素 。 

。 熟悉 HTML 5 中 所 改良 的 标签 。 


2.1 HTML 5 文档 结构 元 素 


在 HTML 5 规范 中 对 语义 特征 方面 进行 了 较 大 的 改进 ,新 增 了 许多 文档 结构 元 素 ,更 好 
地 表达 了 HTML 文档 的 结构 和 语义 ,使 得 文档 结构 更 加 清晰 。HTML 5 规范 中 新 增 了 一 组 请 
义 标签 来 描述 元 素 的 内 容 , 如 article section .nav aside 等 元 素 , 这 些 元 素 的 功能 虽然 可 以 使 用 
div 元 素来 代替 ,但 在 语义 方面 更 加 便于 理解 ,有 利于 搜索 引擎 对 页 面 的 检索 与 抓 取 。 


2.1.1 article 元 素 


article 元 素 可 以 代表 一 个 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 ,可 以 单独 被 外 部 引 
用 的 内 容 。article 可 以 表示 一 篇 文章 ,一 条 新 闻 一 段 评论 或 者 其 他 任意 独立 的 内 容 。 

。 article 元 素 中 可 以 包含 一 个 或 多 个 标题 ,标题 部 分 使 用 head 元 素来 定义 ; 

。 article 元 素 中 可 以 包含 一 个 或 多 个 段落 ,段落 部 分 使 用 section 元 素来 定义 ; 

。 article 元 素 中 可 以 包含 一 个 或 多 个 脚注 ,脚注 部 分 使 用 footer 元 素来 定义 

。 article 元 素 还 允许 内 套 多 个 article 元 素 , 如 一 条 新 闻 后 面 可 以 有 多 条 评论 。 

【案例 2-1】 article. html 


< article> 

< header > 取消 漫游 费 为 何 还 要 等 半年 ?</header > 

< section> 业 内 分 析 人 士 指出 ,全 国 一 体 化 资费 推行 过 程 中 遇 到 的 难点 是 历史 遗留 问题 
</ section> 

< section> 取 消长 途 漫游 费 对 运营 商 来 说 ,意味 着 需要 对 全 部 现存 套餐 进行 梳理 和 修改 
</section> 

< footer > 青岛 新 闻 网 2017 - 10 - 01 </footer> 
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<article > 网友 露 西 : 关注 民生 才 是 大 家 认可 的 领导 一 </article> 
<article> 网 友 王 宝 宝 : 漫游 费 取消 盼 了 这 么 多 年 !</article> 


</article> 


2.1.2 section 元 素 
使 用 section 元 素 对 网 站 或 应 用 程序 中 的 内 容 进行 分 块 , 如 页 眉 、 页 脚 .文章 的 分 块 等 。 
section 元 素 通常 由 标题 和 内 容 构成 ,在 页 面 设计 时 一 般 不 用 section 元 素 作为 容器 ,如 果 需 
要 赋予 样式 或 通过 JavaScript 脚本 来 定义 行为 时 ,推荐 使 用 div 来 代替 section 元 素 。 
。 section 元 素 中 通常 包含 一 个 标题 ,可 以 是 hl 一 h6 中 的 任意 标题 ; 
。 section 元 素 中 可 以 包含 多 个 article 元 素 ,表示 该 分 块 包 含 多 篇 文章 ; 
。 section 元 素 中 也 可 以 骨 套 多 个 section 元 素 ,表示 该 分 块 中 可 以 包含 多 个 子 分 块 。 


【案例 2-2】 section. html 


< section> 
< header >< h3 > 中 国 今日 直播 列表 </h3 ></header> 
< section> 直 播 凭借 其 快速 分 享 、 集 中 的 社交 本 质 ,已 经 成 为 移动 互联 时 代 的 主流 载体 


</section> 
< section > 中国 直播 平台 短 短 一 年 多 , 从 不 到 10 家 猛 增 到 300 多 家 ,</section> 
<article> 
< header > 忙 了 一 天 ,来 陪 陪 你 们 -- 心灵 鸡汤 直播 间 </header > 
< section > 往事 若 能 下 酒 , 回忆 便 是 一 场 宿 醉 .</section> 


</article> 
<article> VR 虚拟 现实 全 景 直播 间 -- 科技 直播 间 </article> 


</section> 


2.1.3 nav 元 素 

nav 元 素 通常 用 作 页 面 导 航 的 链接 组 ,导航 中 的 元 素 可 以 链接 到 当前 页 面 的 其 他 位 置 
或 者 其 他 页 面 ,从 而 实现 页 面 的 导航 功能 ; 在 一 个 页 面 中 可 以 拥有 多 个 nav 元 素 , 作 为 页 面 
不 同位 置 的 导航 ,常见 的 导航 有 顶部 导航 、 底 部 导航 、 侧 边栏 导航 和 翻 页 导航 等 。 


【案例 2-3】 nav. html 


<article> 
< header >< hl > 布谷 鸟 游 戏 直 播 为 大 家 提供 了 一 个 娱 战 娱乐 的 平台 </hl ></header > 


<nav> 


<ul> 
<1i><a href = "/warcraft"> 魔 兽 直 播 </a></1i> 


<1i><a href = "/hero"> 英 雄 联盟 </a></1i> 
<1i><a href = "/crossFire"> 穿 越 火线 </a></1i> 
<1i><a href = "/kingGlory"> 王 者 荣耀 </a></1i> 


</ul> 
</nav> 
</article> 


OP 


2.1.4 header 和 hgroup 元 素 


header 元 素 通常 作为 整个 页 面 或 页 面 内 容 区 块 的 标题 ,标题 中 允许 包含 搜索 表单 或 
logo 图 片 等 内 容 。 每 个 header 元 素 中 至 少 包含 一 个 标题 (hl 一 h6) ,其 中 还 可 以 包含 
hgroup、nav 等 元 素 。 

hgroup 元 素 用 于 将 标题 和 子 标题 进行 分 组 ; 当 文章 或 内 容 区 块 只 有 一 个 主 标题 时 ,可 
以 不 使 用 hgroup 元 素 。 

【案例 2-4】 header. html 


<article> 
< header > 
< hgroup > 
< img src= "images/warcraft logo. jpg" height = "40px"/> 
< hl > 魔兽 争霸 III: 冰 封 王座 </hl > 
<h3 > 一 一 暗夜 要 塞 的 战斗 正式 打响 !</h3 > 
</hgroup> 
</header > 
</article> 


2.1.5 aside 元 素 


aside 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 ,其 内 容 可 以 是 主体 内 容 的 相关 引用 、 
侧 边 栏 . 导航 条 或 广告 等 有 别 于 主体 的 内 容 。 
。 当 aside 元 素 位 于 article 元 素 之 内 时 ,通常 作为 文章 的 侧 边栏 ,其 中 包含 主体 内 容 的 
附属 信息 部 分 ,如 参考 资料 、 名 词 解释 等 ; 
。 aside 元 素 位 于 body 元 素 之 内 时 ,作为 整个 页 面 的 侧 边栏 ,其 中 包含 当前 页 面 或 网 
站 全 局 的 附属 信息 部 分 ,常见 的 应 用 方式 有 广告 单元 友情 链接 .热门 文章 列表 等 。 
【案例 2-5】 aside. html 


< article> 
< header > 
<h3 > 青蛙 主播 是 来 搞笑 的 -- 娱乐 直播 间 </h3 > 
</header > 
< section> 主 播 圈 竞争 越 来 越 激烈 了 ,普通 的 直播 很 难 吸 引 住 用 户 的 眼球 … …</section> 
<aside> 
< span><a href = "/frog"> 青 蛙 </a></span> 
< span ><a href = "/broadcast"> 直 播 </a></span> 
< span><a href = "/entertainment"> 娱 乐 </a></span> 
</aside> 
</article> 
<aside> 
< h4 > 友情 链接 </h4 >< hr /> 
<ul> 
<1i><a href = "https://www. douyu.com"> 斗 鱼 直播 </a></1i> 
<1i><a href = "http://www. huya. com"> 虎 牙 直 播 </a></1i> 
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<1i><a href = "http://www. longzhu. com"> 龙 珠 直播 </a></1i> 
</ul> 
</aside> 


2.1.6 footer 元 素 


footer 元 素 用 于 定义 文档 或 节 的 页 脚 ,通常 包含 文档 的 作者 .版 权 信息 、 使 用 条 款 链接 、 
联系 信息 等 。 一 个 文档 中 可 以 使 用 多 个 footer 元 素 , 在 footer 元 素 中 的 联系 信息 应 位 于 
address 元 素 中 。 

【案例 2-6】 footer. html 


<article> 

< header >< hl > 用 眼神 谈判 一 一 心灵 鸡汤 </hl ></header > 

< section> 快 到 飞 往 巴 黎 的 航班 的 登 机 口 时 ,我 们 从 一 路 飞 奔 变 为 一 溜 小 跑 . 飞 机 尚未 起 飞 ， 

但 登 机 通道 已 经 关闭 ." 等 等 ,我 们 还 没 登 机 ! "我 喘 着 气 喊 道 … …</section> 

< footer > 来 源 :《 沃 顿 商 学 院 最 受 欢迎 的 谈判 课 》 作 者 :[ 美 ] 斯 图 尔 特 - 戴 蒙 </footer > 
</article> 
<footer> 

布谷 鸟 直播 平台 版 权 所 及 青岛 光 聊 服务 有 限 公 司 < br /> 公司 地 址 : 

<address > 青岛 市 中 科研 发 城 888 号 </address> 


</footer > 


2.2 HTML 5 其 他 新 增 元 素 


HTML 5 规范 除了 新 增 的 文档 结构 元 素 外 ,还 提供 了 一 些 其 他 元 素 ,如 bdi, details、 
summary figure figcaption .ruby\rp\rt\progress meter dialog ,mark time、wbr 等 ,目前 并 
不 是 所 有 浏览 器 都 能 较 好 地 支持 这 些 元 素 , 所 以 在 使 用 时 应 先 检查 浏览 器 对 元 素 的 支持 
情况 。 

1. bdi 元素 

bdi 元素 用 于 实现 双向 隔离 (bidirectional isolation) ,将 指定 的 文本 脱离 其 父 元 素 所 设 
置 的 文本 方向 。bdi 元 素 只 有 一 个 dir 属性 ,用 于 指定 元 素 内 文本 的 方向 , 取 值 为 ltr( 左 向 
右 ) rtl( 右 向 左 ) 或 auto( 默 认 ) 。 

【案例 2-7】 bdi. html 


<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "UTF — 8"> 回 邮 内 
<title> bdi 元 素 </title> 案例 视频 讲解 
< style> 
bdi> bdi{ 
width:600px; 
background:1ightblue; 
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</style> 
</head> 
<body> 
布谷 鸟 直播 平台 目前 拥有 < bdi dir = "rt1"> 在 线 用 户 < bdi > 60W</bdi></bdi> 人 < hr/> 
布谷 鸟 直 播 平 台 目 前 拥有 <bdi dir = "ltr"> 在 线 用 户 <bdi> 60W</bdi></bdi> 人 
</body> 
</html> 


在 rtl 修饰 的 容器 中 ,bdi 元 素 的 子 元 素 将 出 现 内 容 前 置 效果 ,代码 运行 结果 如 图 2-1 所 
示 。rtl 所 修饰 的 容器 可 以 是 bdi 元 素 , 也 可 以 是 span ,div 等 元 素 。 
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布谷 鸟 直播 平台 目前 拥有 丽 鸯 在 线 用 户 人 
布谷 乌 直 播 平 台 目前 拥有 在 线 用 户 丽 而 人 








2-1 bdi 元 素 


2. details 和 summary 元 素 
details 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 。summary 元 素 通 常 作为 details 元 
素 的 标题 部 分 。 在 details 元 素 中 标题 部 分 是 可 见 的 , 当 单 击 标题 时 将 会 显示 /隐藏 details 


元 素 中 的 描述 信息 。 
details 元 素 只 有 一 个 open 属性 , 当 元 素 提供 open 属性 时 表示 details 描述 信息 是 可 
见 的 。 


【案例 2-8】 details. html 


<div class= "container"> 
< img src = "images/broadcast. jpg" width= "150px"/> 
< header >< h2 > Web 前 端 技术 直播 课 </h2 ></header > 
<details open = "open"> 
< summary > 显示/ 隐藏 直播 详情 < hr/></summary> 
<p> 全 面 系统 地 介绍 了 Web 前 端 开发 所 涉及 知识 ,并 对 Web 前 端 框 架 进行 讲解 .</p> 
</details> 
</div> 


在 上 述 代码 中 ,由 于 details 元 素 带 有 open 属性 ,所 以 在 打开 页 面 时 details 描述 信息 是 


可 见 的 ; 当 单 击 “ 显 示 / 隐 藏 * 时 ,将 显示 或 隐藏 直播 的 详情 信息 ,代码 运行 结果 如 图 2-2 


站 是 


3. figure 和 figcaption 元 素 

figure 元 素 用 于 规定 独立 的 流 内 容 ( 如 图 像 、 图 表 、 照 片 .代码 等 内 容 ) ,是 一 种 组 合 元 
素 , 可 带 有 标题 和 描述 信息 。figcaption 元 素 用 来 定义 figure 元 素 的 标题 (caption) 部 分 ,一 
般 位 于 元 素 的 第 一 个 或 最 后 一 个 位 置 。 
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Web 前 端 技术 直播 课 


Y 显示 /隐藏 直播 详情 





全 面 系统 地 介绍 了 Web 前 端 开 发 所 涉及 知 
识 ， 并 对 Web 前 端 框架 进行 讲解 。 





图 2-2 details 元 素 
【案例 2-9】 figure. html 


<figure> 
<figcaption>< h3 > 布谷 鸟 直播 平台 </h3 ></figcaption> 
< img src = "images/broadcast. jpg" width= "100"/> 
<p> Web 前 端 技术 直播 , 娱乐 中 学 习 成 长 .</p> 
</figure> 


上 述 代码 中 ,将 图 片 和 文字 使 用 figure 元 素 封 装 成 一 幅 搬 图 ,更 加 有 利于 搜索 引擎 对 图 
片 的 检索 。 代 码 运 行 结果 如 图 2-3 所 示 。 





CG | @ 127.0.0.1:8020/ 章 节 源 码 /c 会 D 


布谷 鸟 直播 平台 


S 


Web 前 庙 技 术 直 播 ,娱乐 中 学 习 成 长 。 





图 2-3 figure 元素 


4. ruby rp 和 rt 元 素 

ruby 元 素 用 于 定义 注释 ,如 中 文 注音 或 其 他 东亚 字符 的 发 音 。ruby 元 素 由 解释 文本 和 
解释 内 容 两 部 分 构成 。 在 ruby 元 素 中 ,使 用 rt 元 素来 提供 解析 内 容 ; 除 此 之 外 ,rp 元 素 是 
可 选 的 , 当 浏 览 器 不 支持 ruby 元 素 时 ,将 显示 rp 元素 中 的 内 容 , 否 则 不 显示 。 

【案例 2-10】 ruby. html 


<ruby > 布谷 岛 <rp>(</rp><rt>cuckoo</rt><rp>)</rp></ruby> 
<ruby> 直 <rp>(</rp><rt>zhi</rt><rp>)</rp></ruby> 
<ruby> 播 <rp>(</rp><rt>bo</rt><rp>)</rp></ruby> 
<ruby> 平 <rp>(</rp><rt>ping</rt><rp>)</rp> 

台 <rp>(</rp><rt> tai</rt><rp>)</rp></ruby ><br/> F 9 
< img src = "images/cuckoo. jpg" width= "150px" /> 案例 视频 讲解 
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运行 上 述 代码 , 当 浏 览 器 支持 ruby 元 素 时 ,显示 效果 如 图 2-4 所 示 ; 当 浏 览 器 不 支持 
ruby 元 素 时 ,显示 效果 如 图 2-5 所 示 。 


CG | @O filey//EJHTML5 丙 级.， 妆 | C |@o 1270018020/1t 女 |9 @ 


cuckoo zhi bo pingtai 布谷 鸟 (cuckoo) 直 (zhi) 播 (bo) 平 (ping) 台 (tai) 











图 2-4 浏览 器 支持 ruby 元 素 的 效果 图 2-5 浏览 器 不 支持 ruby 元 素 的 效果 


5. progress 和 meter 元 素 

progress 元 素 用 于 表示 任务 的 进度 ,进度 条 动态 改变 时 需要 通过 JavaScript 来 实现 。 
progress 元 素 具有 max 和 value 两 个 属性 ,其 中 max 属性 表示 任务 的 总 数 , 默 认为 1; value 
属性 表示 已 完成 任务 的 数量 。 下 述 代 码 演 示 了 progress 元 素 的 用 法 。 

【案例 2-11】 progress. html 


< progress ></progress> 
< progress value = "0.25"></progress> 
< progress max = "100" value = "25"></progress> 
<progress max = "100" value = "1" jd = "broadcastProgress"></progress> 
<script> 
var broadcastProgress = document. getElementById( "broadcastProgress" ); 
function broadcasting(){ 
broadcastProgress. value 
= broadcastProgress. value < 100?broadcastProgress. value + 10:1; 
setTimeout("broadcasting()",1000); 
} 
broadcasting(); 
</script > 


上 述 代 码 运行 结果 如 图 2-6 所 示 。 由 于 第 一 个 进度 条 没有 提供 max 和 value 属性 , 进 
度 块 一 直 处 于 左右 自由 滑动 状态 ; 第 二 个 进度 条 没有 ml 
提供 max 属性 ,默认 为 1, 而 value 属性 为 0.25, 说 明 当 及 中 ex 二 
前 进度 是 整体 的 1/4; 第 三 个 进度 条 的 max 属性 为 
100,value 属性 为 25, 说 明 当 前 进度 也 是 整体 的 1/4, 效 
果 与 第 二 个 进度 条 完全 相同 ; 使 用 JavaScript 脚本 来 
控制 第 四 个 进度 条 ,每 秒 增加 10 个 单位 , 当 value 值 超 
过 100 时 重新 从 1 开始 计算 ,从 而 实现 进度 的 变换 
效果 。 

meter 元 素 用 来 度量 已 知 范围 或 分 数值 内 的 标量 ， 
也 称 为 gauge( 尺 度 ) ,如 磁盘 使 用 情况 、 查 询 结 果 等 可 以 使 用 meter 来 度量 。meter 元 素 的 
属性 见 表 2-1。 








2-6 ”progress 进度 条 
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表 2-1 meter 元素 的 属性 




















属 性 描 述 

value 设置 或 获取 meter 元 素 的 当前 值 , 必 须要 在 min 与 max 值 的 中 间 
max 设置 meter 元 素 的 最 大 值 ,默认 为 1 

min 设置 meter 元 素 的 最 小 值 ,默认 为 0 

high 设置 过 高 的 阔 值 , 当 value 大 于 high 并 小 于 max 时 ,显示 过 高 的 颜色 
low 设置 过 低 的 阐 值 , 当 value 小 于 low 并 大 于 min 时 ,显示 过 低 的 颜色 
optimum 设置 最 佳 值 





下 述 代 码 演示 了 meter 元 素 的 用 法 。 
【案例 2-12】 meter. html 


<meter ></meter > 没有 属性 的 meter < br/> 

<meter value = "0.5"></meter > 只 有 value 属性 的 meter <br/> 

<meter value = "0.1" low= "0.25"></meter > value < low <br/> 

<meter value = "0.5" high= "0.8"></meter > low <= value <= high <br/> 

<meter value = "0.9" high= "0.8"></meter > value > high < br/> 

<meter low= "0.25" optimum= "0.15" high= "0.75" value = "0.5"></meter> 
optimum < low < value < high < br/> 

<meter low= "0.25" optimum= "0.4" high= "0.75" value = "0.5"></meter> 
low < optimum 和 value < high <br/> 

< meter low= "0.25" optimum = "0.85" high= "0.75" value = "0.5"></meter> 
low < value < high < optimum < br/> 

<meter low= "0.25" optimum = "0.85" high= "0.75" value = "0.2"></meter > 
value < low < high < optimum < br/> 

< meter low= "0.25" optimum= "0.2" high= "0.75" value = "0.8"></meter> 
optimum < low < high < value <br/> 


上 述 代码 在 浏览 器 中 预览 的 结果 如 图 2-7 所 示 。 








D 127.0.01:8020/ 5 x \* 
C | © 127.0.0.1:8020/ 章 源码 /chapter02/met 从 


没有 属性 的 meter 

只 有 value 属 性 的 meter 

value < low 

low <= value <= high 

value > high 

optimum < low < value < high 
low < optimum 和 value < high 
low < value < high < optimum 
value < low < high < optimum 
optimum < low < high < value 
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。 当 meter 元 素 没有 设置 任何 属性 时 ,默认 只 显示 浅 灰色 的 背景 ; 


。 当 meter 元 素 只 有 value 属性 , 且 符 合 0< value <1 条 件 时 ,将 呈现 绿色 的 颜色 条 ; 
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。 当 meter 元 素 符合 low < 二 value < 一 high 条 件 时 ,将 呈现 绿色 的 颜色 条 ; 
当 meter 元 素 符 合 value < low 或 value > high 时 ,将 呈现 黄色 的 颜色 条 ; 
当 meter 元 素 符合 value 在 [low,， high]\ 而 optimum 不 在 [low,， high ] 时 ,将 呈现 黄 
色 的 颜色 条 ; 

。 当 meter 元 素 的 value 和 optimum 均 在 [low,， high] 时 ,将 呈现 绿色 的 颜色 条 ; 

。 当 meter 元 素 符 合 value < low < high < optimum 或 optimum < low < high < value 

时 ,将 呈现 红色 的 颜色 条 。 

6. dialog 元 素 

dialog 元 素 用 于 定义 一 个 对 话 框 ,该 元 素 仅 有 一 个 open 属性 ; 当 dialog 元 素 提供 open 
属性 时 ,表示 窗口 初始 化 时 默认 是 可 见 的 。dialog 元 素 还 提供 了 show() 和 showModal() 两 
个 方法 ,其 中 ,showO 〇 方法 用 于 显示 对 话 框 ,并 按照 对 话 框 所 在 DOM 流 的 位 置 水 平 居中 显 
示 ; 而 showModal() 方 法 用 于 以 模 态 形式 显示 对 话 框 , 模 态 对 话 框 默认 位 于 页 面 的 中 心 位 
置 , 且 处 于 页 面 的 最 顶层 ,有 效 防 止 z-index 属性 的 干扰 。 

【案例 2-13】 dialog. html 





< dialog id = "myDialog"> 
< img src = "images/entertainment. png"/>< br/> 
< input type= "button" value= "用 户 连接 失败 ,关闭 窗口 "onclick = "closeDialog()"/> 
</dialog>< hr/> 
< input type = "button" onclick = "showDialog()" value= "显示 窗口 "人 >< br/> 
< input type = "button" onclick = "showModalDialog()" value = " 模 态 窗口 "/> 
<script> 
var myDialog = document. getElementById( "myDialog"); 
function showDialog( ){ 
myDialog. show( ); 
} 
function showModalDialog( ){ 
myDialog. showModal ( ); 
} 
function closeDialog( ){ 
myDialog. close( ); 
} 
</script> 


上 述 代 码 运 行 时 , 单 击 “ 显 示 窗口 "按钮 时 ,通过 show() 方 法 以 普通 对 话 框 形 式 显示 ,对 
话 框 的 上 边缘 与 水 平 线 重合 ,如 图 2-8 所 示 。 单 击 “ 模 态 窗口 ”按钮 时 ,通过 showModal() 方 
法 以 模 态 对 话 框 形式 显示 , 且 位 于 窗口 的 正中 央 , 如 图 2-9 所 示 。 


.日 前 只 有 Chrome 和 Opera 浏览 器 支持 dialog 元 素 ,其 他 浏览 器 千 不 支持 。 


7. mark.time 和 wbr 元 素 

mark 元 素 用 于 定义 带 有 标记 的 文本 。time 元 素 用 于 定义 公历 的 时 间 (24 小 时 制 ) 或 日 
期 ,需要 注意 的 是 : 目前 在 任何 浏览 器 中 都 不 会 有 特殊 效果 ,其 功能 主要 是 方便 搜索 引擎 在 
检索 时 确定 文章 的 发 布 时 间 。wbr 元 素 用 于 规定 在 文本 的 何 处 适合 添加 换行 符 ; 当 浏 览 器 
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书记 连接 失败 ， 关闭 富 口 
图 2-8 普通 对 话 框 图 2-9 模 态 对 话 框 


窗口 或 者 父 级 元 素 的 宽度 足够 宽 时 不 进行 换行 ,而 宽度 不 够 宽 时 ,将 会 在 wbr 元 素 所 处 的 
位 置 进行 换行 ;br 元素 则 表示 此 处 必须 换行 。 
【案例 2-14】 otherElement. html 


<div> 
< img src = "images/working. jpg" width = "80px"/> 
<p> 每 天 晚上 < time> 19:00 </time > 我 都 在 直播 写作 业 .</p> 
<p> 更 精彩 的 直播 将 在 < time datetime = "2008 - 02 -14"> 情 人 节 </time > 开始 … …</p> 
</div> 
< img src = "images/valentine. jpg" width = "300px"/> 
<div> 
Another outdoors type of date that is very romantic < wbr/> for 
<mark>V- day </mark > is Horseback Riding. 
</div> 


上 述 代 码 运行 结果 如 图 2-10 所 示 , time 元 素 在 页 面 中 没有 任何 效果 ; mark 标记 的 元 
素 使 用 黄色 底 纹 进行 凸显 ; wbr 处 并 没有 直接 回 车 ,而 是 根据 外 层 容器 的 宽度 ,自动 进行 
调整 。 





LSJLEISTSJ 
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点 每 天 陶 上 19:00 我 都 在 直播 写作 业 。 
更 精彩 的 直播 将 在 情人 节 开 始 


Another outdoors type of date that is very romantic for V-day 
is Horseback Riding. 





图 2-10 mark、time 和 wbr 元 素 的 效果 ( 见 彩 插 ) 
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2.3 改良 后 的 标签 


HTML 5 规范 除 提供 了 一 些 新 元 素 外 ,还 对 一 些 原 有 的 元 素 进 行 了 改良 ,如 ol、dl、 
city、small 和 iframe 等 元 素 。 

1. ol 元 素 

HTML 5 对 ol 列表 进行 了 改良 ,为 其 新 增 了 start 和 reversed 属性 ; 其 中 ,start 属性 用 
于 指定 列表 的 开始 编号 ,reversed 属性 用 于 将 列表 反 向 进行 编号 。 下 述 代 码 演 示 了 改良 后 
的 ol 元 素 的 用 法 。 

【案例 2-15】 ol. html 


目前 较 火 的 直播 平台 有 : < hr/> 
<div> 
<ol start = "4" type= "1" reversed= "reversed"> 
<1i> 斗 鱼 直 播 </1i> 
<1i> 虎 牙 直播 </1i> 
<1i> 布 谷 鸟 直播 </1i> 
<1i> 六 间 房 直播 </1i> 
</ol> 
</div> 
< div class = "split"></div> 
<div> 
<ol start = "4" type= "1"> 
<1i> 战 旗 直 播 </1i> 
<1i> 梦 蝶 直 播 </1i> 
<1i> 熊 猫 直播 </1i> 
<1i> 龙 珠 直播 </1i> 
</ol> 
</div> 


上 述 代 码 运行 结果 如 图 2-11 所 示 。 在 第 一 个 列表 中 提供 了 start 和 reversed 属性 , 表 
示 列 表 的 编号 从 4 开始 反 向 编号 ; 第 二 个 列表 则 从 4 开始 正 向 编号 。 
[LEIIESISIZRI 
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目前 较 火 的 直播 平台 有 : 









4. 斗 鱼 直播 . 
3. 虎 下 直播 5. 梦 蝶 直播 
2. 布谷 鸟 直播 6. 能 猫 直播 
1 六 间 房 直播 


图 2-11 改良 的 ol 元 素 


第 2 章 ”HTML 5 文档 结构 2) 
2. dl 元 素 


在 HTML 中 ,dl 元 素 是 一 个 专门 用 来 定义 列表 (definition list) 的 元 素 , 由 术语 (dt) 和 
定义 (dd) 两 部 分 构成 , 且 成 对 出 现 。 

HTML 5 规范 对 dl 元 素 重新 进行 定义 ,每 个 dl 列表 中 可 以 包含 1 一 n 个 术语 (dt) ,而 
每 个 术语 后 紧 跟 1~n 个 定义 (dd) 。 一 个 列表 中 不 允许 含有 相同 名 字 的 术语 ,也 不 允许 有 
重复 的 定义 。 

【案例 2-16】 dl. html 





<div class = "firstRow fl1"> 
<dl class = "fl"> 
<dt>< img src= "images/broadcast - fox. jpg"/></dt >< dd> 幽 狐 直 播 </dd> 
</dl> 
< 由 class = "fl1"> 
<dt>< img src= "images/broadcast - elephant. jpg"/></dt><dd> 象 牙 直 播 </dd> 
</dl> 
< 由 class= "fl1"> 
<dt>< img src= "images/broadcast - girl. png"/></dt ><dd> 美 女 直 播 </dd> 
</dl> 
</div> 
<div class = "secondRow f1"> 
<dl> 
<dt class = "fl">< img src = "images/b5. png"/></dt >< dd> 在 线 直播 </dd> 
<div class = "clear plit"></div> 
<dt class= "fl">< img src = "images/b6,. jpg"/></dt><dd> 录 像 回 放 </dd> 
<div class = "clear plit"></div> 
<dt class= "fl">< img src = "images/b7. jpg"/></dt >< dd> 同 步 直 播 </dd> 
</dl> 
</div> 


上 述 代码 运行 结果 如 图 2-12 所 示 。 在 第 一 个 div 中 包含 三 个 dl 元素 ,使 用 dl 元 素来 
实现 上 下 结构 的 图 文 混 排 效果 ; 在 第 二 个 div 中 ,一 个 dl 元 素 中 包含 三 对 dt 和 dd 元 素 , 形 
成 左右 结构 的 图 文 混 排 效果 。 
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图 2-12 dl 列表 元 素 


3. iframe 元 素 
在 HTML 5 规范 中 ,iframe 元 素 新 增 了 sandbox 属性 ,在 安全 性 方面 进行 了 加 强 。 通 


(ee HTML S 高 级 应 用 与 开发 - 微 课 版 


过 sandbox 属性 来 禁止 被 加 载 页 面 的 表单 提交 、JavaScript 脚本 的 执行 、 在 父 窗口 中 加 载 链 
接 的 文档 内 容 以 及 从 cookie 或 Storage 中 读 取 数据 等 操作 。sandbox 属性 的 取 值 情况 见 




















表 2-2。 
表 2-2 sandbox 属性 的 取 值 
属 性 值 描 述 
应 用 以 下 所 有 的 限制 
allow-forms 允许 表单 提交 
allow-scripts 允许 脚本 执行 
allow-top-navigation 允许 在 iframe 父 窗 口中 加 载 链接 的 文档 内 容 
allow-same-origin 允许 从 cookie 或 Storage 中 读 取 数 据 


sandbox 属性 的 取 值 可 以 是 一 个 或 多 个 值 ,属性 值 之 间 使 用 空格 隔 开 。 下 述 代码 创建 
了 一 个 页 面 ,在 iframe 框架 中 引用 时 使 用 。 
【案例 2-17】 living. html 


<div> 
<a href = "http://www. 163.com" target =" parent"> 
< img id= "girl" src= "images/live girl3. jpg" width= "110px" height = "150px"/> 
</a> 
< form action = "http://www. csdn. com" name = "myform"> 
Ge input type = "text" id = "flowerNum" value = "1"/> 
< input type = "button" class = "btnClass" value = " 换 人 " onclick = "change()"/> 
< input type = "submit" class = "btnClass" value = " 送 花 "/> 
</form> 
</div> 
< Script> 
var i=1; 
function change( ){ 
i= (i)%3+1; 
Var flowerNum = document. getElementById("flowerNum"). value; 
var girl = document. getElementById("girl"); 
girl. src = "images/live girl" +i+".jpg"; 
lL 


</script> 


在 living. html 页 面 中 ,提供 了 超 链接 、JavaScript 脚本 的 调用 、 表 单 提交 等 功能 ,该 页 面 
将 作为 iframe. html 页 面 的 引用 页 面 。 下 述 代 码 演示 了 在 iframe 框架 引用 living. html 页 
面 时 ,使 用 sandbox 属性 对 子 页 面 的 执行 权限 进行 控制 。 

【案例 2-18】 iframe. html 


< div class = "girlPosition"> 
< iframe src= "living. html" frameborder = "no" border = "0" 
scrolling = "no" 
sandbox = "allow - forms allow- scripts allow- top— 
navigation"></iframe> 


回 ho, 
</div> 案例 视频 讲解 
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上 述 代码 中 ,使 用 sandbox 属性 对 iframe 元 素 进行 设置 ,其 中 ,allow-forms、allow- 
scripts 和 allow-top-navigation 分 别 表 示人 允许 所 嵌入 的 页 面 进行 表单 提交 、 执 行 JavaScript 
脚本 在 父 窗口 中 加 载 链接 的 文档 内 容 。 代 码 运行 结果 如 图 2-13 所 示 , 单 击 * 换 人 ”按钮 时 ， 
使 用 JavaScript 脚本 来 更 换 图 像 ; 单 击 主播 的 图 像 时 ,将 在 父 窗口 打开 目标 链接 ; 单 击 “ 送 
花 ? 按 钮 时 对 页 面 表单 进行 提交 。 读 者 可 以 尝试 将 sandbox 属性 中 的 某 个 值 去 掉 , 然 后 进行 
测试 ,以 查看 sandbox 属性 中 各 项 所 产生 的 效果 差异 。 
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除 此 之 外 ,HTML 5 还 为 iframe 元 素 新 增 了 srcdoc 属性 ,用 于 指定 所 要 加 载 的 HTML 
代码 片段 。 当 iframe 元 素 同时 具有 srcdoc 和 src 属性 时 ,优先 使 用 srcdoc 属性 。 

4. script 元 素 

在 HTML 5 之 前 , 当 浏 览 器 初始 化 页 面 时 ,如 果 页 面 需 要 引用 一 个 JavaScript 外 部 脚 
本 文件 , 则 浏览 器 解析 到 script 元 素 时 将 暂停 页 面 的 解析 任务 ,进而 向 服务 器 请 求 所 需要 的 
JavaScript 脚本 文件 ,然后 等 待 脚本 文件 的 下 载 ; 当 文 件 下 载 完毕 后 ,继续 执行 页 面 的 解析 
任务 。 此 时 ,如 果 外 部 脚本 文件 过 大 ,势必 造成 在 页 面 加载 时 的 性 能 瓶颈 问题 。 

为 了 解决 上 述 问题 ,在 HTML 5 规范 中 为 script 元 素 新 增 了 async 和 defer 属性 ,用 于 
提高 网 页 的 加 载 速 度 , 当 页 面 需要 加 载 外 部 JavaScript 脚本 文件 时 ,可 以 通过 异步 方式 来 加 
载 脚本 文件 ,无 须 暂 停 浏览 器 对 页 面 的 解析 过 程 。 

async 属性 和 defer 属性 的 区 别 : 当 使 用 async 属性 时 ,和 脚本 文件 下 载 完毕 后 立即 执行 
onload 事件 处 理 函 数 ; 当 使 用 defer 属性 时 ,脚本 文件 下 载 完 毕 后 ,并 不 立即 执行 onload 事 
件 处 理 函 数 ,而 是 等 待 页 面 资源 全 部 加 载 完 毕 后 ,再 按照 外 部 文件 引用 的 顺序 来 执行 的 
onload 事件 处 理 函 数 。 

【示例 】 async 属性 的 使 用 


< script async src = "boy. js" onload = "initBoy()"></script > 
< script async src = "girl. js" onload = "initGirl()"></script> 


上 述 代码 中 ,尽管 脚本 文件 的 出 现 顺序 是 boy. js 和 girl. js; 但 是 在 异步 加 载 过程 中 ,可 
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能 出 现 先 将 girl. js 加 载 完毕 并 立即 执行 onload 事件 的 initGirl() 处 理 函 数 的 情况 ,所 以 当 
使 用 async 属性 时 ,脚本 的 出 现 顺序 和 执行 顺序 可 能 不 同 。 
【示例 】 defer 属性 的 使 用 


< script defer src = "boy. js" onload = "initBoy()"></script> 
< script defer src = "girl. js" onload = "initGirl()"></script > 


在 上 述 代 码 中 , 当 需 要 加 载 脚本 文件 时 ,向 服务 器 发 出 加 载 文件 的 请 求 , 文 件 加 载 完 毕 
后 ,并 不 会 立即 执行 onload 事件 的 处 理 函 数 ,而 是 等 待 页 面 所 需 的 资源 全 部 加 载 完毕 后 ,再 
顺序 执行 initBoy() 和 initGirl() 方 法 ,执行 的 顺序 与 引用 顺序 一 致 。 


2.4 HTML5 拖 放 APl 


拖 放 (draggable)API 是 HTML 5 规范 中 一 个 比较 重要 的 API, 通 过 拖 放 API 可 以 将 
页 面 中 的 元 素 变 成 可 移动 的 元 素 , 为 页 面 中 的 元 素 提供 拖 放 效果 ,使 人 机 交互 变 得 更 加 友 
好 。draggable 属性 的 取 值 见 表 2-3。 


表 2-3 draggable 取 值 范围 














属性 值 描 述 
true 用 于 设置 draggable 元 素 可 拖 放 
false 用 于 设置 draggable 元 素 不 可 拖 放 
auto 元 素 将 使 用 浏览 器 的 默认 行为 


在 拖 放 过 程 中 ,将 会 产生 一 系列 的 鼠标 事件 ,具体 见 表 2-4。 
表 2-4 拖 放 时 所 产生 的 事件 











事 件 名 事 件 源 说 明 
ondragstart 被 拖 动 的 页 面 元 素 元 素 拖 动 时 ,触发 该 事件 
ondrag 被 拖 动 的 页 面 元 素 元 素 拖 动 过 程 中 ,触发 该 事件 
ondragend 被 拖 动 的 页 面 元 素 拖 动 结束 时 ,触发 该 事件 





ondragenter | 拖 动 时 鼠标 经 过 的 元 素 | 当 拖 动 元 素 进 入 目标 元 素 的 范围 时 触发 该 事件 
ondragleave | 拖 动 时 鼠标 经 过 的 元 素 | 当 拖 动 元 素 离开 目标 元 素 的 范围 内 时 触发 该 事件 
ondragover 拖 动 时 鼠标 经 过 的 元 素 | 目标 元 素 范围 之 内 , 拖 动 目标 元 素 时 会 不 断 地 触发 该 事件 
ondrop 拖 动 时 鼠标 经 过 的 元 素 | 目标 元 素 范围 之 内 ,释放 拖 动 元 素 时 触发 该 事件 

















在 拖 放 过 程 中 ,通过 event. dataTransfer 对 象 从 拖 动 元 素 向 目标 元 素 传 递 数据 。 
dataTransfer 对 象 中 提供 了 许多 实用 的 属性 和 方法 ,如 用 dropEffect 与 effectAllowed 属性 
相 结合 来 实现 自 定 义 拖 放 效果 。 有 关 dataTransfer 对 象 的 属性 见 表 2-5。 

表 2-5 dataTransfer 对 象 的 属性 


属 性 描 述 


用 于 设置 或 返回 允许 的 操作 类 型 , 取 值 范围 是 none\copy、\link 或 move; 如 果 操 作 的 类 
型 不 是 effectAllowed 属性 所 允许 的 类 型 , 则 操作 将 会 失败 





dropEffect 
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续 表 
属 性 描 述 

用 于 设置 或 返回 被 拖 放 元 素 的 操作 效果 , 取 值 范围 是 none、copy、copyLink、copyMove、 
effectAllowed | .. ne 

link、linkMove、move、all 或 uninitialized 
items 返回 一 个 包含 拖 放 数据 的 dataTransferItemList 对 象 
types 返回 一 个 DOMStringList, 包 括 存 人 dataTransfer 对 象 中 数据 的 所 有 类 型 
files 返回 一 个 拖 放 文件 的 集合 ,如 果 没 有 拖 放 文件 该 属性 为 空 


通过 dataTransfer 对 象 的 setData() 和 getData() 方 法 ,将 拖 动 元 素 的 数据 传 给 目标 元 
素 。dataTransfer 对 象 常见 的 方法 见 表 2-6 。 


表 2-6 dataTransfer 对 象 的 方法 








方 法 描 述 
setData(format, data) 向 dataTransfer 对 象 中 添加 数据 
getData(format) 从 dataTransfer 对 象 读 取 数 据 





clearData(format) 


清除 dataTransfer 对 象 中 指定 格式 的 数据 





setDragImage(icon ,xyy) 





设置 拖 放 过 程 中 的 图 标 , 参 数 x\y 表示 图 标的 相对 坐标 


在 页 面 中 实现 拖 放 元 素 的 效果 至 少 需要 以 下 几 步 。 
(1) 为 拖 放 元 素 提供 draggable 属性 ,并 将 该 属性 设 为 true; 此 时 元 素 允 许 拖 放 , 但 在 


拖 放 过 程 中 不 能 携带 任何 数据 。 


【示例 】 为 元 素 提供 draggable 属性 


< img id= "imagel" src= "images/flower01. jpg" draggable = "true" /> 


人 


由 于 < img > 标签 和 带 有 href 属性 的 < a > 标签 默认 是 可 拖 放 的 。 上 述 代 码 中 的 
draggable 一 "true" 属 性 可 以 省 略 。IE 9 十 、Firefox、Opera 12、Chrome 以 及 Safari 5 


浏览 器 对 拖 放 API 提供 了 较 好 的 支持 。 


(2) 为 拖 放 元 素 提 供 ondragstart 事件 监听 ,并 在 事件 处 理 方法 中 提供 所 要 携带 的 


数据 。 


【示例 】 设置 ondragstart 事件 监听 器 


< img id= "imagel”src= "images/flower01. jpg" draggable = "true" 
ondragstart = "drag(event)" /> 


function drag(e){ 


e. dataTransfer. effectAllowed = "link"; 
//e. dataTransfer. setData( "text", e. target. id); //IE 兼容 写法 
e. dataTransfer. setData("text/plain",e. target. id); // 标 准 写法 


(3) 针对 目标 释放 区 ,设置 ondrop 事件 监听 器 ,用 于 接收 事件 所 携带 的 数据 ,并 对 数据 


进行 处 理 。 
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【示例 】 设置 目标 释放 区 


<div id= "livingFlowers" ondrop = "drop(event)”ondragover = "allowDrop(event) "> 
<h2 > 主播 花篮 </h2 >< hr/> 
</div> 
function drop(e){ 
var data = e. dataTransfer. getData("text"); 
// 如 果 目 标 是 DIV 标签 ,在 其 中 添加 内 容 
if(e. target. tagName == "DIV" ){ 
e. target. appendChild( document. getElementById(data)); 
}else if(e. target. tagName == "IMG"){ 
// 如 果 目 标 是 IMG 标签 ,在 其 父 标签 中 添加 内 容 
e.target. parentNode. appendChild( document. getElementById(data) ); 
! 
allowDrop(e); 


(4) 当 释 放 被 拖 放 的 元 素 时 ,浏览 器 默认 在 新 窗口 中 打开 被 拖 放 元 素 或 链接 内 容 , 此 时 
需要 阻止 浏览 器 的 默认 行为 。 

【示例 】 阻止 浏览 器 的 默认 行为 

function allowDrop(e){ 


e. preventDefault( ); // 通 知 浏览 器 不 再 执行 事件 相关 的 默认 动作 
e. stopPropagation( ); // 阻 止 事件 的 冒 泡 行为 


下 述 代码 通过 “美女 直播 送 花 ”案例 ,来 演示 HTML 5 拖 放 API 的 使 用 过 程 。 
【案例 2-19】 draggable. html 


<div id = "buyFlowers" ondrop = "drop(event)" ondragover = "allowDrop 





(event)"> 
< h2 > 我 要 送 鲜花 </h2 > 
<hr/> Ce 
< img id = " imagel" src = " images/flower01. jpg" ondragstart = " drag 案例 视频 讲解 
(event)"/> 


< img id= "image2" src = "images/flower02. jpg" ondragstart = "drag(event)"/> 
< img id= "image3" src = "images/flower03. jpg" ondragstart = "drag(event)"/> 
</div> 
<div class= "living" > 
< img src = "images/live girl. jpg" id= "livingGirl" ondrop = "drop(event)" 
ondragover = "allowDrop(event)"/> 
< h2 > 直播 美女 </h2 > 
</div> 
<div id= "livingFlowers" ondrop = "drop(event)" ondragover = "allowDrop(event)"> 
<h2 > 主播 花篮 </h2 >< hr/> 
</div> 
< script type = "text/javascript"> 
var i=1; 


// 创 建 一 个 图 像 元 素 
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Var myIcon = document. createElement ("img"); 
// 设 置 图 像 的 src 属性 
myIcon. src = "images/mouse_move. png"; 
function drag(e){ 
e. dataTransfer. effectAllowed = "move"; 
// 王 暂 不 支持 , 亚 \chrome 支持 该 效果 
e. dataTransfer. setDragImage(myIcon,0,0); 
//e. dataTransfer. setData( "text", e. target. id); // 王 兼容 写法 
e. dataTransfer. setData("text/plain"，e.target. id); ”// 标 准 写法 
1 
function drop(e){ 
e. dataTransfer. dropEffect = "move"; 
var data = e. dataTransfer. getData( "text"); 
// 当 鲜花 放 到 主播 头像 上 时 ,更 换 其 头像 ,并 将 鲜花 放 到 主播 花篮 中 
if(e. target. id== "livingGirl"){ 
e. target. src = "images/live girl over0" +i+".jpg"; 
i=i%3+1; 
setTimeout (function(){ 
€. target. src = 'images/live_girl. jpg'; 
},1000); 
// 将 鲜花 从 一 侧 移 到 另 一 侧 中 
Var SourceParentID = document. getElementById( data)., parentNode. id; 
if(sourceParentID== "livingFlowers"){ 
document. getElementById( "buyFlowers") 
.appendChild(document. getElementById( data) ) ; 
Jelse{ 
document. getElementById( "livingFlowers") 
.appendChild(document. getElementById( data) ) ; 
}else if(e. target. tagName == "DIV") {  // 如 果 目 标 是 DIV 标签 ,在 其 中 添加 内 容 
e.target. appendChild( document. getElementById( data) ); 
} else if(e. target. tagName == "IMG") { 
// 如 果 目 标 是 IMG 标签 ,在 其 父 标签 中 添加 内 容 
e. target. parentNode. appendChild(document. getElementById( data) ) ; 
} 


allowDrop(e); 
} 
function allowDrop(e){ 
e. preventDefault(); // 通 知 浏览 器 不 再 执行 事件 相关 的 默认 动作 
e. stopPropagation( ) // 阻 止 事件 的 冒 泡 行为 
} 
</script> 


上 述 代 码 运行 时 效果 如 图 2-14 所 示 。 用 户 可 以 将 鲜花 从 左 侧 “ 我 要 送 鲜花 ”处 拖 放 到 
右 侧 “主播 花篮 ”中 ,也 可 以 将 “主播 花篮 "中 的 鲜花 拖 放 到 “我 要 送 鲜 花 " 处 。 当 把 “我 要 送 鲜 
花 ” 或 “主播 花篮 ”中 的 鲜花 拖 放 到 “主播 美女 "图像 上 时 ,美女 图 像 会 进行 改变 , 且 鲜 花 自动 
放置 到 对 面 花 篮 中 ,1s 后 “主播 美女 ”的 图 像 自动 恢复 为 原来 的 图 像 。 
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站 HTML 5 中 的 拖 放 x Vy 
了 CG | @ 127.0.0.1.8020/ 章 证 源码 /chapter02/draggable html 女 | 
我 要 送 鲜 花 主播 花篮 
直播 美女 
图 2-14 直播 送 鲜花 
本 章 总 结 
。 HTML 5 规范 中 新 增 了 许多 文档 结构 元 素 ,能 更 好 地 表达 HTML 文档 的 结构 和 语 
义 , 使 文档 结构 更 加 清晰 。 


article 元 素 可 以 代表 一 个 文档 ` 页 面 或 应 用 程序 中 独立 的 、 完 整 的 .可 以 单独 被 外 部 
引用 的 内 容 。 

section 元 素 用 于 对 网 站 或 应 用 程序 中 的 内 容 进 行 分 块 。 

nav 元 素 是 一 个 可 以 用 作 页 面 导 航 的 链接 组 ,其 中 导航 元 素 可 以 链接 到 当前 页 面 的 
其 他 部 分 或 者 其 他 页 面 。 

header 元 素 通 常用 作 整 个 页 面 或 页 面 内 容 区 块 的 标题 ,hgroup 元 素 用 于 将 标题 及 
其 子 标题 进行 分 组 。 

aside 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 。 

details 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 ,summary 元 素 通常 作为 details 
元 素 的 标题 部 分 。 

figure 元 素 用 于 规定 独立 的 流 内 容 ( 如 图 像 .图 表 、 照 片 . 代 码 等 ) ,是 一 种 组 合 元 素 ， 
可 带 有 标题 和 描述 信息 。 

progress 元 素 用 于 表示 任务 的 进度 ,meter 元 素 用 来 度量 已 知 范围 或 分 数值 内 的 
标量 。 

dialog 元 素 用 于 定义 一 个 对 话 框 , 该 元 素 仅 有 一 个 open 属性 , 当 dialog 元 素 提 供 
open 属性 时 ,表示 窗口 初始 化 时 默认 是 可 见 的 。 

HTML 5 除了 提供 了 一 些 新 元 素 外 ,还 对 一 些 原 有 的 元 素 进 行 了 改良 ,如 ol dl、 
city、small iframe 等 元 素 。 
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本 章 练习 
1. 下 列 选项 中 不 属于 HTML 5 文档 结构 元 素 的 是 
A. article B. section C. datePickers D. aside 
2. 关于 HTML 5 语义 标签 ,下 列 选项 中 说 法 错误 的 是 


A._article 元 素 可 以 代表 一 个 文档 、 页 面 或 应 用 程序 中 独立 的 完整 的 ,可 以 单独 被 
外 部 引用 的 内 容 
B. nav 元 素 是 一 个 可 以 用 作 页 面 导航 的 链接 组 ,其 中 的 导航 元 素 链接 到 当前 页 面 的 
其 他 部 分 或 者 其 他 页 面 
C. footer 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 ,可 以 包括 当前 页 面 或 主体 内 
容 的 相关 引用 、 侧 边栏 .导航 条 或 广告 等 有 别 于 主体 内 容 的 部 分 
D. header 元 素 通 常用 作 整 个 页 面 或 页 面 内 容 区 块 的 标题 ,也 可 以 包含 其 他 内 容 , 如 
搜索 表单 或 logo 图 片 
3. 关于 HTML 5 新 增 元 素 说 法 错误 的 是 。 
A. details 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 
B.summary 元 素 通 常 作为 details 元 素 的 标题 部 分 
C. ruby 元 素 用 于 定义 注释 ,如 中 文 注音 或 其 他 东亚 字符 的 发 音 
D. progress 元 素 用 来 度量 已 知 范围 或 分 数值 内 的 标量 
4. 关于 dialog 元 素 说 法 错误 的 是 。 
A. dialog 元 素 用 于 定义 一 个 对 话 框 
B. dialog 元 素 拥 有 open 和 close 两 个 属性 
C. showModal() 方 法 用 于 以 模 态 形式 显示 对 话 框 
D. 以 show() 方 法 显示 对 话 框 时 ,会 按照 其 在 DOM 流 中 的 位 置 水 平 居 中 显示 
5. 关于 progress 和 meter 元 素 说 法 正确 的 是 
A. progress 元 素 用 于 表示 任务 的 进度 ,自身 能 够 实现 进度 条 的 变化 
B. meter 元 素 用 于 表示 任务 的 进度 ,自身 能 够 实现 进度 条 的 变化 
C. progress 元 素 用 来 度量 已 知 范围 或 分 数值 内 的 标量 
D. meter 元 素 用 来 度量 已 知 范围 或 分 数值 内 的 标量 
6. 关于 以 下 代码 说 法 正确 的 是 


<ol start = "4" type= "1" reversed= "reversed"> 
< 1i> 战 旗 直 播 </1i> 
<1i> 梦 蝶 直 播 </1i> 
<1i> 熊 猫 直播 </1i> 
<1i> 龙 珠 直播 </1i> 
</ol> 


A. 序列 是 一 个 有 序 序列 ,类 型 是 数值 类 型 ,从 4 开始 反 向 排列 
B. start 属性 用 于 指定 列表 的 开始 编号 
C. reversed 属性 可 以 对 列表 反 向 进行 编号 
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D. ol 是 一 种 只 能 以 数字 为 编号 的 序列 
7. 关于 iframe 元 素 说 法 错误 的 是 6 
A. iframe 不 利于 搜索 引擎 优化 ,在 HTML 5 中 被 弃 用 
B. HTML 5 为 iframe 元 素 增加 了 sandbox 属性 ,在 安全 性 方面 进行 了 加 强 
C. iframe 是 一 个 双 标 签 元 素 ,必须 提供 结束 标签 
D. HTML 5 为 iframe 元 素 新 增 了 srcdoc 属性 ,用 于 指定 所 要 加 载 的 HTML 代码 
片段 





人 SS 本 章 目标 


。 了 解 表单 的 概念 与 用 途 。 

。 掌握 HTML 5 中 新 增 的 表单 控件 。 
。 熟悉 HTML 5 表单 属性 。 

。 掌握 HTML 5 表单 控件 的 属性 。 

。 热 练 使 用 HTML 5 表单 验证 方法 。 


3.1 HTML 5 表单 概述 


在 Web 应 用 程序 的 开发 过 程 中 ,表单 (form) 是 非常 重要 的 一 部 分 。 当 客户 端 与 服务 端 
交互 时 ,通过 表单 来 实现 用 户 信 息 的 验证 与 采集 。 

HTML 表单 主要 包含 表单 元 素 和 表单 控件 两 大 类 ,表单 控件 又 分 为 表单 域 和 按钮 两 种 
类 型 。 其 中 ,表单 域 是 一 些 用 于 实现 用 户 输 入 的 组 件 ,包括 文本 框 、 密 码 框 . 单 选 按 钮 . 复 选 
按钮 .下 拉 列 表 框 、 多 行文 本 框 ,文件 域 等 控件 。 按 钮 分 为 提交 (Csubmit) 按 钮 . 重 置 (reset) 按 
钮 .图片 按 钮 .普通 按钮 等 类 型 。 通 常 使 用 提交 按钮 或 Ajax 异步 提交 方式 实现 表单 数据 的 
提交 ,使 得 Web 应 用 能 够 获得 客户 端 所 输入 的 数据 。 

在 HTML 5 规范 中 吸纳 了 Web Forms 2.0 标准 ,对 表单 系统 进行 升级 与 改造 ,新 增 了 
一 些 表 单 属性 和 表单 控件 ,并 对 原 有 的 部 分 控件 进行 改良 ,对 表单 元 素 内 容 新 增 了 有 效 性 的 
验证 功能 。HTML 5 对 表单 元 素 的 功能 进行 强化 ,大 幅度 地 改善 了 表单 元 素 的 功能 ,使 得 
表单 的 开发 更 加 方便 、 快 捷 。 


3.2 HTML 5 表单 的 改良 


在 HTML 4 中 ,表单 是 一 个 包含 表单 控件 的 区 域 ,通过 HTML 元 素 ( 如 表格 、 段 落 等 ) 
实现 表单 的 局 部 布局 。 表 单 控件 必须 位 于 表单 元 素 之 内 ,否则 在 表单 提交 时 无 法 将 该 控件 
中 的 数据 一 起 提交 到 服务 端 ; 当 需 要 提交 表单 之 外 的 表单 控件 数据 时 ,只 能 通过 JavaScript 
脚本 对 数据 进行 处 理 并 提交 。 

一 个 页 面 中 可 以 包含 一 个 或 多 个 表单 ,表单 之 间 相 互 独立 不 能 嵌 套 。 虽然 一 个 页 面 可 
以 包含 多 个 表单 ,但 用 户 向 服务 端 发 送 数 据 时 一 次 只 能 提交 一 个 表单 中 的 数据 ; 如 需 同时 
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提交 多 个 表单 , 需 通过 JavaScript 异步 交互 技术 来 实现 。 
【案例 3-1】 HTML4_form. html 


< form action = "" method = "post" class = "basic - grey"> 

<hl > 联系 方式 < span > 请 填写 下 列 选 项 , 以 便 更 好 地 与 您 联系 !</span></hl > 
<label> 

< span > 用 户 名 : </span> 

< input type = "text" name = "name”placeholder = "请 输入 用 户 名 "/> 
</label> 
< label >< span > 邮箱 地 址 : </span> 

< input type = "email" name = "email" placeholder = "请 输入 有 效 邮箱 地 址 "/> 
</label> 
< label >< span > 留言 信息 : </span> 

< textarea name = "message" placeholder = "请 填写 您 的 留言 信息 "></textarea> 
</label> 
< label >< span > 留言 类 型 : </span> 

< Select name = "selection"> 

< option value = "业务 咨询 "> 业务 咨询 </option> 
< option value = "售后 服务 "> 售后 服务 </option > 

</select> 
</label> 
<label> 

< span > gnbsp;</span> 

< input type = "submit" class = "button" value = "提交 "/> 
</label> 

</form> 


上 述 代码 运行 结果 如 图 3-1 所 示 。 表 单 中 包含 单行 文本 框 、 多 行文 本 框 、 下 拉 列 表 框 和 
按钮 等 控件 ,通过 label 和 span 等 元 素 实 现 表 单 的 布局 。 整 个 表单 作为 一 个 整体 , 单 击 “ 提 
交 ” 按 钮 时 ,将 表单 中 的 数据 一 起 提交 到 服务 端 。 










D 127.0.0.1:8020/ 覃 和 天 x 忆 
GC | @ 127.0.0.1.8020/ 章 节 源 吧 /chapter03/HTML4_fornht 女 | : 


联系 方式 





图 3-1 HTML 4 表单 
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在 HTML 5 规范 中 ,对 表单 及 表单 控件 进行 了 改进 ,允许 表单 控件 位 于 页 面 的 任意 位 
置 ,通过 表单 控件 的 form 属性 来 指明 该 控件 隶属 哪个 表单 ,使 得 表单 布局 更 加 灵活 。 下 述 
代码 演示 了 使 用 HTML 5 Form 来 实现 表单 布局 。 

【案例 3-2】 HTMLS_form. html 


< form id = "chartRoomForm" onsubmit = "return submitChartMsg( )"> </form> 
< form id = "LeavingMsgeForm" onsubmit = "return submitLeavingMsg( )"></form> 
<div class = "basic - grey"> 
< hl >< img src = "images/chartRoom. jpg"/> 在 线 聊 天 < span > 实时 在 线 沟 通 !</span></hl > 
< label >< span > 用户 名 : </span> 
< input type = "text" name = "name" form = "chartRoomForm"/> 
</label> 
< label >< span > 聊天 内 容 : </span> 
< textarea name = "message" form = "chartRoomForm"></textarea> 
</label> 
< label >< span> &nbsp;</span> 
< input type = "submit" class = "button" value = "发 送 " form = "chartRoomForm" /> 
</label> 
</div> 
<div class= "basic - grey"> 
<hl >< img src = "images/LeavingMessage. jpg"/> 离 线 留 言 < span > 请 填写 留言 信息 ， 
我 们 将 在 第 一 时 间 解 决 您 的 问题 !</span></hl > 
< label>< span> 用 户 名 : </span> 
< input type = "text" name = "name" form = "LeavingMsgeForm"/> 
</label> 
< label >< span > 留言 信息 : </span> 
< textarea name = "message" form= "LeavingMsgeForm"></textarea> 
</label> 
< label >< span> &nbsp;</span> 
< input type = "submit" value = "留言 " form = "LeavingMsgeForm"/> 
</label> 
</div> 
<script> 
function submitChartMsg( ){ 
alert(" 您 已 发 送 聊 天 信息 "); 
return false; 
} 
function submitLeavingMsg( ){ 
alert(" 您 提交 留言 信息 "); 
return false; 
} 
</script> 





上 述 代 码 中 ,通过 表单 控件 的 form 属性 来 指定 当前 控件 属于 哪个 表单 ; 当 单 击 “发 送 ” 
按钮 时 ,弹出 “您 已 发 送 聊 天 信息 ”的 提示 信息 ; 当 单 击 留 言 " 按 钮 时 ,弹出 “您 提交 留言 信 
息 ” 的 提示 信息 。 代 码 运 行 结果 如 图 3-2 所 示 。 有 关 HTML 5 表单 控件 的 属性 将 在 后 面 小 
节 中 进行 介绍 。 
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3-2 HTML 5 表单 


3.2.1 HTML 5 表单 控件 


在 HTML 4 中 ,使 用 input 元 素来 创建 单行 文本 框 \ 密 码 框 、 单 选 按钮 , 复 选 按钮 文件 
域 . 提 交 按 钮 、 重 置 按钮 等 表单 控件 。HTML 5 在 此 基础 上 ,对 input 元 素 进行 改良 并 新 增 
了 一 些 类 型 ,其 中 包括 search ,tel url email datePickers ,number range 和 color 等 ,具体 见 














表 3-1。 
表 3-1 input 元 素 新 增 的 类 型 
类 型 描 述 
search 专门 用 于 搜索 关键 字 的 文本 框 , 多 用 于 手机 客户 端 
tel 专门 用 于 输入 电话 号 码 , 多 用 于 手机 客户 端 
url 创建 一 个 url 输入 框 ,并 检查 其 内 容 是 否 符合 正确 的 url 格式 
email 创建 一 个 email 输入 框 ,并 检查 其 内 容 是 否 符合 email 格式 





datePickers 日 期 与 时 间 的 输入 文本 框 ,包括 date.month、week ,time ,datetime .datetime-local 等 
number 创建 一 个 只 能 输入 数字 的 文本 框 ,否则 提交 时 将 数值 文本 框 的 内 容 作为 空白 进行 提交 














range 生成 一 个 拖 动 条 ,只 允许 输入 一 定 范围 内 的 数值 ,默认 为 0 一 100 
color 颜色 选择 文本 框 ,其 值 为 “# FFFFFF” 格 式 的 文本 
1. search 类 型 


search 类 型 的 input 元 素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 ,其 外 观 与 text 类 
型 的 文本 框 基本 相同 ,多 用 于 移动 界面 设计 。 当 search 类 型 的 文本 框 获 得 焦点 时 ,将 弹出 
一 个 搜索 类 型 的 输入 键盘 ,在 键盘 的 右 下 角 提 供 “ 搜 索 ” 按 键 。 

【案例 3-3】 HTML5_form_search. html 


<formaction="" method= "post" class = "basic - grey"> 
<hl > 站 内 搜索 - 布谷 鸟 直播 平台 </hl > 
< label >< span> 站 内 搜索 : </span> 
< input id = "search" type = "search" name = "search"/> 
</label> 国字 站 全 
</form> 案例 视频 讲解 
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上 述 代 码 运行 后 ,通过 手机 终端 进行 访问 , 单 击 搜索 文本 框 时 弹出 一 个 搜索 类 型 的 输入 
键盘 ,效果 如 图 3-3 所 示 。 

2. tel 类 型 

tel 类 型 的 input 元 素 是 一 种 专门 用 来 输入 电话 号 码 的 文本 框 ,其 外 观 与 text 类 型 的 文 
本 框 基 本 相同 ,多 用 于 移动 界面 设计 。 当 tel 类 型 的 文本 框 获得 焦点 时 ,将 弹出 一 个 数字 类 
型 的 输入 键盘 ,在 键盘 的 右 下 角 提 供 “ 下 一 步 "按键 。 

【案例 3-4】 HTML5_form_tel. html 


< form action = "" method = "post" class = "basic - grey"> 
<hl > 会 员 注册 - 布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl > 
< label >< span > 联系 电话 : </span> FE mh 
<input id= "tel" type = "tel" name = "tel" placeholder = "请 输入 电 于 站 起 | 乓 | 





回应 ?水 补 
话 "/> 案例 视频 讲解 
</label> 
</form> 


上 述 代 码 运 行 后 ,通过 手机 终端 进行 访问 , 单 击 “联系 电话 ”文本 框 时 弹出 一 个 tel 类 型 
的 输入 键盘 ,效果 如 图 3-4 所 示 。 
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图 3-3 ”search 类 型 的 输入 框 图 3-4 tel 类 型 的 输入 框 
3. url 类 型 


url 类 型 的 input 元 素 是 一 种 专门 用 来 输入 URL 地 址 的 文本 框 ,文本 框 的 输入 内 容 必 
须 是 一 个 包含 访问 协议 的 完整 URL 地 址 (如 https:// 等 ); 当 提 交 表 单 时 ,如 果 文 本 内 容 不 
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符合 URL 地 址 格式 , 则 会 弹出 错误 提示 信息 并 阻止 表单 的 提交 。 
【案例 3-5】 HTMLS_form_url. html 


< form action = "http://www. baidu. com" method = "post" class = "basic - grey"> 
<hl > 会 员 注册 -布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl > 国 

< label>< span> 直 播 入 口 : </span> 路 

< input id= "url" type= "url" name = "url"/> 





</label> ? A 
< label >< span> gnbsp;</span> 案例 视频 讲解 
< input type = "submit" class = "button" value = "注册 "/> 
</label> 
</form> 


上 述 代 码 运行 后 ,通过 手机 终端 进行 访问 , 当 URL 文本 框 获得 焦点 时 ,弹出 一 个 URL 
类 型 的 输入 键盘 ,其 中 包括 “www. ”. com” 等 便捷 输入 键 ; 键盘 的 右 下 角 提 供 “ 开 始 ” 按 钮 ， 
单 击 “ 开 始 ” 按 钮 时 提交 表单 。 当 输入 的 内 容 不 是 完整 的 URL 地 址 时 ,弹出 “请 输入 网 址 ” 
提示 信息 ,效果 如 图 3-5 所 示 。 

4. email 类 型 

email 类 型 的 input 元 素 是 一 种 专门 用 来 输入 email 地 址 的 文本 框 ; 当 表 单 提交 时 ,如 
果 文 本 框 的 内 容 不 符合 email 格式 , 则 不 允许 提交 表单 ; email 文本 框 的 内 容 在 默认 情况 下 
允许 为 空 , 当 文本 框 中 必须 输入 email 地 址 时 ,可 以 使 用 required 属性 进行 限制 。 

除 此 之 外 ,在 email 文本 框 中 能 够 同时 输入 多 个 email 地 址 ,email 地 址 之 间 需 要 使 用 豆 
号 (,) 隔 开 。 

【案例 3-6】 HTMLS_form_email. html 


< form action = ""” method = "post" class = "basic - grey"> 
<hl > 会 员 注册 - 布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl > 
< label >< span > 邮箱 地 址 : </span > 
< input id= "email" type = "email" name = "email" required = "required" 
multiple = "multiple" /> 
</label> 
< label >< span> &nbsp;</span> 
< input type = "submit" class = "button" value = "注册 "/> 
</label> 
</form> 


上 述 代码 中 ,定义 了 一 个 email 文本 框 ,通过 required 属性 来 设置 文本 框 的 判 空 验证 ， 
multiple 属性 用 来 说 明 该 文本 框 能 够 同时 输入 多 个 email 地 址 ,地 址 之 间 默 认 使 用 逗号 (,) 
隔 开 。 运 行 上 述 代码 , 当 email 文本 框 为 空 , 单 击 “ 注 册 ” 按 钮 时 的 效果 如 图 3-6 所 示 。 

5. datePickers 类 型 

datePickers 类 型 的 input 元 素 是 一 组 用 于 输入 日 期 和 时 间 的 文本 框 ,其 中 包括 date、 
month、week、time 和 datetime 等 类 型 。date 类 型 用 于 选取 年 、 月 、 日 ,month 类 型 用 于 选取 
年 和 月 ,week 类 型 用 于 选取 年 和 周 ,time 类 型 用 于 选取 时 间 ( 包 括 小 时 和 分 钟 ),datetime 用 
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于 选取 年 .月 .日 及 时 间 。 下 述 代 码 演示 了 datePickers 类 型 文本 框 的 用 法 。 
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图 3-5 ”URL 类 型 的 输入 框 图 3-6 ”email 类 型 的 输入 框 














【案例 3-7】 HTMLS_form_datePickers. html 


< form action="" method = "post" class = "basic - grey"> 
<hl > 布谷 鸟 直播 平台 </hl > 
< label> 
< span > 直播 日 期 : </span>< input id = "broadcastDate" type = "date" /> 
</label> 
<label> 
< span > 直播 时 间 : </span>< input id = "broadcastTime" type = "time" /> 
</label > 
< label >< span> gnbsp;</span> 
< input type = "submit" class = "button" value = "注册 "/> 
</label > 
</form> 


上 述 代码 中 ,定义 了 date 和 time 两 个 类 型 的 文本 框 ,代码 运行 结果 如 图 3-7 所 示 。 单 
击 date 类 型 文本 框 右 侧 的 上 下 箭头 将 弹出 一 个 日 期 选择 框 ,也 可 以 单独 单 击 date 文本 框 中 
的 年 月 .日 ,再 通过 右 侧 上 下 箭头 调整 相应 数据 或 直接 输入 数据 。 单 击 time 文本 框 右 侧 的 
上 下 箭头 可 以 分 别 调整 小 时 和 分 钟 。 

6. number 类 型 

number 类 型 的 input 元 素 是 一 种 专门 用 来 输入 数值 的 文本 框 , 通 过 max 和 min 属性 来 
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图 3-7 datePickers 类 型 的 输入 框 


设 定 元 素 所 能 输入 的 最 大 值 和 最 小 值 ; step 属性 用 于 设置 数值 之 间 的 合法 间隔 ,默认 步 长 
为 1; value 属性 表示 文本 框 的 初始 值 或 当前 值 。 

通过 数值 文本 框 右 侧 的 上 下 箭头 可 以 根据 步 长 逐步 递增 (或 递减 ) ,也 可 以 直接 输入 某 
个 整数 ; 当 用 户 输入 非 数 值 型 字符 或 不 在 指定 范围 内 的 数值 时 ,会 弹出 相关 提示 ,并 阻止 表 
单 的 提交 。 

【案例 3-8】 HTMLS_form_number. html 


< form action = "" method = "post" class = "basic - grey"> 
<hl > 直播 设置 - 布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl> 
< label >< span > 直播 时 长 : </span> 
< input id= "duration" type = "number" min="10" max="100" step="10" 
required = "required"/> 
< input type = "submit" class = "button" value = "注册 "/> 
</label> 
</form> 


上 述 代 码 运行 结果 如 图 3-8 所 示 。number 类 型 的 本 [BEI 
文本 框 只 能 输入 数值 ,其 他 类 型 的 字符 均 无 法 输入 。 [osm 
在 duration 文本 框 中 所 能 输入 的 最 小 值 为 10, 最 大 值 直播 设置 -布谷 鸟 直播 平台 | 
为 100, 且 步 长 为 10。 当 文本 框 中 没有 输入 任何 信息 “| mamsaram | 
时 , 单 击 “ 注 册 ” 按 钮 将 会 提示 “请 填写 此 字段 ”; 当 文 本 | ae “= * 

框 输 入 的 数据 小 于 10 时 ,将 提示 “ 值 必须 大 于 或 等 于 py 加 we te 

10”; 当 文 本 框 输入 的 数据 大 于 100 时 ,将 提示 “ 值 必须 | 
小 于 或 等 于 100”; 当 文 本 框 中 输入 66 时 ,将 提示 “请 输 3-8 ”number 类 型 的 输入 框 

入 有 效 值 ,两 个 最 接近 的 有 效 值 分 别 为 60 和 70”。 

7. range 类 型 

range 类 型 的 input 元 素 一 般 用 于 生成 一 个 数字 滑动 条 ,来 输入 特定 范围 的 数值 。 
range 类 型 与 number 类 型 功能 基本 相同 ,两 者 都 具有 max、min、step 和 value 属性 ; 区 别 在 
于 外 观 样式 和 默认 值 不 同 。range 文本 框 的 min 属性 默认 为 0,max 属性 默认 为 100。 
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【案例 3-9】 HTML5S_form_range. html 


< form action ="" method = "post" class = "basic - grey"> 
<hl > 直播 设置 - 布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl > 
< label > 
< span > 直播 时 长 : </span> 
< input id= "duration" type = "range" min="0" max="100" step="1" 
onchange = "changeRange( )" oninput = "changeRange()"/> 
</label> 
< label >< span> 时 长 为 : </span> gnbsp; 
< input type = "text" id= "rangeResult"/> 
</label> 
</form> 
<script> 
function changeRange( ){ 
var duration = document. getElementById("duration"); 
var rangeResult = document. getElementById("rangeResult" ); 
rangeResult. value = duration, value; 
var red = (100 — duration. value) * 255/100; 
rangeResult. style. backgroundColor = 'rgb('+ red+ ',255,0)'; 
1 


</script > 


上 述 代码 运行 结果 如 图 3-9 所 示 。 当 滑 块 位 于 左 
侧 时 ,duration 文本 框 的 值 为 0、 背 景 颜色 为 黄色 ; 当 滑 展 昌 ee 
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块 从 左 向 右 滑 动 时 ,文本 框 的 值 从 0 向 100 逐步 递增 ， 


文本 框 的 背景 颜色 从 黄色 逐渐 变 成 绿色 。 直播 设置 -布谷 名 直播 平台 


请 认真 博 写 以 下 选项 : 





全 当 input 和 textarea 元 素 的 值 发 生 改 变 时 将 触 a 目 
> 发 oninput 事件 ,该 事件 与 onchange 事件 非常 HE 为 国 
相似 。 不 同 之 处 在 于 oninput 事件 在 元 素 值 发 
变化 时 立 则 攻 me 二 
po Ph 触发 ,而 onchange 在 元 素 失 去 焦 图 3.9 range 类 型 的 输入 框 
8. color 类 型 


color 类 型 的 input 元 素 用 于 生成 一 个 颜色 选择 器 。 当 用 户 从 颜色 选择 器 中 选择 某 种 
颜色 时 ,文本 框 将 自动 显示 被 选 颜色 对 应 的 十 六 进 制 字符 串 ( 如 “#EECCAA” 格 式 )。 
【案例 3-10】 HTMLS_form_color. html 


<formaction="" method= "post" class = "basic - grey"> 
< hl > 站 内 搜索 -布谷 鸟 直播 平台 </hi > 
< label >< span> 站 内 搜索 : </span> 
< input id = "color" type= "color" name = "color" 


Je = "changeBodyColor (this)"/> 
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所 示 


其 中 
方式 


以 手 


</label> 
</form> 
<script> 
function changeBodyColor (color){ 
document. body. style. backgroundColor = color. value; 
} 


</script> 


上 述 代 码 中 ,使 用 color 类 型 的 input 元 素 创建 了 一 个 颜色 选择 器 ,运行 效果 如 图 3-10 
。 单 击 页 面 中 的 选择 器 将 弹出 一 个 颜色 选取 窗口 ,选择 某 一 颜色 并 设 为 网 页 的 背景 
颜色 。 
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图 3-10 ”color 类 型 的 输入 框 ( 见 彩 插 ) 





在 HTML 5 中 除了 对 input 元 素 进行 改良 外 ,还 新 增 了 datalist、keygen、output 元 素 。 
,datalist 元 素 用 于 规定 输入 域 的 选项 列表 ,keygen 元 素 用 于 提供 一 种 验证 用 户 的 可 靠 


,output 元 素 用 于 不 同类 型 的 输出 。 
9. datalist 元 素 


datalist 元 素 用 于 生成 输入 域 的 选项 列表 ,将 单行 文本 框 的 list 属性 和 datalist 元 素 的 
id 属性 相对 应 ,从 而 将 文本 框 与 datalist 数据 项 绑 定 在 一 起 ,实现 一 个 下 拉 提 示 框 ,用 户 可 


动 输入 内 容 或 从 下 拉 列 表 中 选取 一 项 。 
【案例 3-11】 datalist. html 


<div class= "basic - grey"> 
<hl > 直播 主题 - 布谷 鸟 直播 平台 </hl > 
< input id = "theme" type = "text" name = "theme" list = "themeList" /> 
< datalist id = "themeList"> 
< option value = "bottle. jpg"> 瓶 子 主题 </option> 
< option value = "cloud. jpg"> 云 彩 主题 </option> 
< option value = "owl. jpeg"> 猫 头 应 </option> 
< option value = "love. jpg"> 爱 情 主题 </option > 
</datalist> 
</div> 


上 述 代 码 运行 结果 如 图 3-11 所 示 ,用户 可 以 从 下 拉 列 表 中 选择 一 项 ， 





回电 
时 


也 可 以 好 


F 动 输入 
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内 容 ; 在 用 户 输入 过 程 中 ,下 拉 列 表 项 将 会 从 datalist 数据 项 中 自动 进行 筛选 。 


SBJ[EI 画 [可 中 aJISIEL 到 
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3-11 datalist 元 素 的 使 用 


10. keygen 元 素 

keygen 元 素 为 密 钥 对 生成 器 (key-pair generator), 当 提交 表单 时 将 会 生成 两 个 密 钥 ， 
一 个 是 私 钥 (private key) ,一 个 是 公 钥 (public key)。 私 钥 存 储 于 客户 端 ; 公 钥 将 被 发 送 到 
服务 端 ,之 后 用 来 验证 用 户 的 客户 端 证 书 (client certificate)。 

【案例 3-12】 keygen. html 


< form action = "http://www. w3school. com. cn/example/html5/demo_form. asp" 
method = "get" class = "basic - grey"> 
< hl > 用 户 秘 钥 -布谷 鸟 直播 平台 </hl > 
< label >< span > 用户 名 :</span>< input type = "text" name = "usr_name"/></label > 
< label >< span > 密 钥 方式 :</span>< keygen name = "security"/></label> 
< label >< span> &nbsp;</span> 
< input type = "submit" class = "button" value = "提交 密 钥 "/></label > 
</form> 


上 述 代 码 在 Firefox 52 中 运行 结果 如 图 3-12 所 示 。 单 击 “ 提 交 密 钥 ” 按 钮 时 ,将 弹出 
“正在 生成 密 钥 ... 可 能 需要 几 分 钟 ... .” 窗 口 ,如 图 3-13 所 示 。 稍 后 密 钥 生成 后 窗口 自动 
关闭 ,并 将 表单 进行 提交 。 


http//127...5483047684 x 
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用 户 名 : cuckoo 


密 加 方式 : 。 高 级 二 
正在 生成 训 负 -可 能 等 要 几 分 
名 


请 精 候 … 








图 3-12 keygen 元 素 图 3-13 产生 新 的 密 钥 
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使 用 JSP、PHP 或 Node.js 等 技术 作为 服务 端 技术 ,在 服务 端 获取 表单 所 提交 的 公 钥 。 
在 Firefox 浏览 器 开发 工具 (F12) 的 网 络 选项 卡 中 ,查看 请 求 报头 中 所 提交 的 参数 信息 ,如 
图 3-14 所 示 。 





居 内存 = 网 络 目 存储 田 " 回 上 日 容 口 四 Xx 
1 个 清关 L64 KB5, 0.06 秒 过 淖 URL 回 
ix < NE EE 加 
了 查询 字符 课 
usr_name: “cuckoo” 
security: "MIICQDCCASgwggEiMAOGCSqGSIb3DQEBAQUAAAIBDwAwggEKAo...7cGF7nF80jPp8/Awhbkkn3pmGkmhbJX96T+yljcCztEMg==" 
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目前 浏览 器 对 keygen 元 素 的 支持 程度 ,不 足以 使 其 成 为 一 种 通用 的 安全 标准 。IE 
与 Edge 目前 并 没有 支持 keygen 元 素 ,也 没有 公开 表明 对 keygen 的 支持 。Firefox 
虽然 在 现 有 版 本 中 支持 keygen, 但 公开 表示 将 移 除 对 keygen 的 支持 。 而 谷歌 在 
Chrome 49 中 废弃 了 对 keygen 的 支持 ,并 在 Chrome 57 版 本 中 彻底 移 除 。Safari 暂 
时 没有 明确 表态 ,将 继续 对 其 进行 支持 。 


11. output 元 素 

HTML 5 规范 中 新 增 了 output 元 素 , 用 于 定义 不 同类 型 的 输出 ,如 计算 结果 或 脚本 的 
输出 。outpnut 元 素 具 有 for form 和 name 三 个 属性 ,其 中 ,for 属性 用 于 定义 与 output 元 素 
相关 的 一 个 或 多 个 元 素 ,form 属性 用 于 设置 output 元 素 与 表单 的 隶属 关系 ,name 属性 用 
于 定义 output 元 素 的 唯一 名 称 。 需 要 注意 的 是 : output 元 素 必须 从 属于 某 个 表单 。 

【案例 3-13】 output. html 


< form action = ""” method = "post" class = "basic - grey"> 
<hl > 直播 设置 - 布谷 鸟 直播 平台 < span > 请 认真 填写 以 下 选项 !</span></hl > 
< label> 
< span > 直播 时 长 : </span> 
< input id = "duration" type = "range" 
oninput = "rangOutput. value = duration. value"/> 
< div>< output name = "rangOutput”for = "duration"> 50 </output ></div> 
</label> 
</form> 


上 述 代码 运行 结果 如 图 3-15 所 示 。 当 滑动 滚动 条 时 ， 


output 元素 的 内 容 也 随 之 改变 ; 通过 for 属性 来 指定 CEL x 曾 
output 元 素 与 哪些 表单 控件 有 关 ,使 得 代码 更 加 易 读 。 吉 播 设置 -布谷 鸟 直播 平台 


请 认真 久 写 以 下 过 硕 : 


3.2.2 HTML 5 表单 属性 


HTML 5 规范 为 表单 元 素 新 增 了 autocomplete 和 
novalidate 属性 ,不 再 支持 accept 属性 。 改 良 后 的 表单 元 


直 所 时长: 








图 3-15 output 元素 的 使 用 
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素 的 属性 见 表 3-2。 
表 3-2 改良 后 的 表单 元 素 的 属性 
属 性 描 述 
action 提交 表单 时 ,向 何 处 发 送 表单 中 的 数据 
a 服务 端 能 够 处 理 的 内 容 类 型 列表 ,用 逗号 隔 开 ; 目前 主 浏览 器 并 不 支持 , 且 在 HTML 5 
中 不 再 提供 支持 
accept-charset | 服务 端 可 处 理 的 表单 数据 字符 集 
是 否 应 该 启用 自动 完成 功能 ,适用 form 元 素 以 及 input 类 型 的 text、 search、 url、 tel、 
uncomplete email ,password ,datepickers、range 和 color 控件 
a 表单 数据 内 容 类 型 ,在 发 送 表 单数 据 之 前 如 何 对 其 进行 编码 , 取 值 可 以 为 application/x- 
www-form-urlencoded .multipart/form-data, text/plain 
id 设置 表单 对 象 的 唯一 标识 符 
name 设置 表单 对 象 的 名 称 
target 打开 处 理 URL 的 目标 位 置 (不 建议 使 用 ) 
method 规定 向 服务 端 发 送 数据 所 采用 的 方式 , 取 值 可 以 为 get、post 
onsubmit 向 服务 端 提交 数据 之 前 ,执行 其 指定 的 JavaScript 脚本 程序 
onreset 重 置 表单 数据 之 前 ,执行 其 指定 的 JavaScript 脚本 程序 
提交 表单 时 是 否 对 其 进行 验证 ,适用 form 元 素 以 及 input 类 型 的 text、 search、url, tel、 
novalidate 
email ,password、datepickers、range 和 color 控件 





其 中 ,autocomplete 属性 用 于 设置 表单 元 素 和 input 元 素 是 否 具有 自动 完成 功能 。 当 


autocomplete 属性 为 on 时 表示 元 素 开启 自动 完成 功能 , 当 autocomplete 属性 为 off 时 表示 
元 素 关闭 自动 完成 功能 。 当 form 表单 和 input 元 素 同 时 设置 了 autocomplete 属性 时 ,优先 
使 用 input 元 素 的 autocomplete 属性 ,而 忽略 form 表单 所 设置 的 autocomplete 属性 。 


【案例 3-14】 HTML5_form_attribute. html 


< form action= "datalist. html" autocomplete = "on" class = "basic - grey"> 
< hl > 实名 认证 - 布谷 鸟 直播 平台 </hl > 
< label>< span> 用 户 名 : </span>< input type = "text" name = "userName"/></label> 
< label >< span > 手机 号 : </span>< input type = "text" name = "tel"/></label > 
< label >< span > 身份 证 : </span>< input type = "text" name = "identity" 
autocomplete = "off"/></label > 
< label >< span> &nbsp;</span>< input type = "submit" value = "实名 认证 " 
class = "button"/></label > 
</form> 


上 述 代 码 中 ,为 form 元 素 添加 属性 autocomplete 二 "on" ,表示 表单 中 的 所 有 元 素 开 启 


自动 完成 功能 ; 而 身份 证 号 对 应 的 文本 框 提供 了 属性 autocomplete 一 "off" ,表示 该 文本 框 
关闭 了 自动 完成 功能 。 代 码 运 行 结果 如 图 3-16 所 示 ,填写 表单 后 单 击 “ 实 名 认证 ”按钮 提交 
表单 ,然后 单 击 “ 后 退 " 按 钮 发 现 “ 用 户 名 ”和 “手机 号 ”对 应 的 文本 框 仍然 保留 用 户 输入 的 内 
容 , 而 “身份 证 ”对 应 的 文本 框 为 空 。 


novalidate 属性 用 于 设置 在 提交 表单 时 是 否 对 该 表单 进行 验证 ; 当 novalidate 属性 为 


默认 值 时 ,表示 提交 表单 之 前 需要 进行 表单 验证 。 
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【案例 3-15】 novalidate. html 


< form action = "datalist. htm]l" class = "basic - grey" novalidate = "novalidate"> 

< hl > 实名 认证 - 布谷 鸟 直播 平台 </hl > 

< label > 用 户 名 : < input type = "text" name = "userName" required/></label > 

< label > 手机 号 : < input type = "text" name = "tel" required/></label > 

< label > 身份 证 : < input type = "text" name = "identity" required/></label> 

< label >< input type = "submit" value= "实名 认证 " class = "button"/></label> 
</form> 


上 述 代码 中 ,form 元 素 提 供 了 novalidate 二 "novalidate" 属 性 ,在 提交 表单 时 将 忽略 表 
单 控件 的 required 验证 。 如 果 form 元 素 没有 提供 novalidate 属性 , 则 在 提交 表单 之 前 需要 
对 表单 进行 required 验证 ,运行 效果 如 图 3-17 所 示 。 
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3.2.3 HTML 5 表单 控件 属性 


HTML 5 规范 为 input 类 型 的 表单 控件 新 增 了 许多 属性 ,除了 之 前 介绍 的 min、max、 
step,list 属性 外 ,还 有 autofocus form、 formaction、pattern 和 required 等 属性 ,具体 见 
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表 3-3 
表 3-3 HTML 5 新 增 的 input 属性 
属 性 描 述 
autofocus 页 面 加 载 时 ,当前 元 素 是 否 自动 获得 焦点 
form 为 表单 控件 指定 关联 的 表单 





formaction 重 写 表 单 的 action 属性 
formenctype 重 写 表单 的 enctype 属性 
formmethod 重 写 表 单 的 method 属性 
formtarget 重 写 表单 的 target 属性 
formnovalidate | 重 写 表单 的 novalidate 属性 






































width 用 于 指定 image 类 型 的 input 元 素 所 对 应 图 像 的 宽度 
height 用 于 指定 image 类 型 的 input 元 素 所 对 应 图 像 的 高 度 
placeholder 文本 框 未 输入 且 未 获得 焦点 时 ,显示 的 输入 提示 信息 
list 引用 预定 义 的 datalist 
multiple 用 于 设置 文本 框 中 可 以 输入 多 个 值 , 适 用 于 email 和 file 类 型 的 input 元 素 
输入 字段 不 能 为 空 ,适用 于 text、search、url,tel、email、 password ,datepickers ,number、 
6 checkbox、radio 以 及 file 类 型 的 input 元 素 
pattern 规定 输入 的 内 容 需 要 符合 特定 的 模式 


1. autofocus 属性 

在 JavaScript 脚本 中 ,通过 focus() 方 法 使 得 某 个 表单 控件 获得 焦点 ; 在 HTML 5 规范 
中 为 表单 控件 新 增 了 autofocus 属性 ,在 页 面 加 载 时 第 一 个 具有 autofocus 属性 的 控件 (如 
文本 框 \ 按 钮 等 ) 将 会 自动 获得 焦点 。 

【示例 】 autofocus 属性 的 用 法 


< input type = "text" name = "anchor" placeholder = "请 输入 主播 大 名 ”autofocus/> 


2. form 属性 

在 HTML 5 之 前 ,表单 控件 必须 位 于 表单 元 素 之 内 ,和 否则 在 表单 提交 时 无 法 将 该 控件 
中 的 数据 一 起 提交 ; 当 需 要 提交 表单 之 外 的 表单 控件 数据 时 ,只 能 通过 JavaScript 脚本 进 
行 处 理 并 对 数据 进行 提交 。 

HTML 5 规范 允许 表单 控件 位 于 form 元 素 之 外 ,通过 表单 控件 的 form 属性 来 指明 该 
控件 与 表单 之 间 的 关系 ,从 而 使 表单 布局 更 加 灵活 。 

【示例 】 form 属性 的 用 法 


<div class = "basic— grey"> 
< form id = "anchorForm" action="" ></form> 
用 户 名 : < input type = "text" form = "anchorForm”placeholder = "请 输入 主播 大 名 "/> 
< input type= "submit" form= "anchorForm”value = "登录 "/> 

</div> 


3. formaction 属性 
在 HTML 5 之 前 ,只 能 将 表单 数据 提交 到 action 属性 所 指定 的 服务 端 进行 处 理 。 当 页 
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面 中 包含 添加 、 修 改 和 删除 等 多 个 按钮 时 ,需要 根据 不 同 的 按钮 提交 到 不 同 的 服务 端 ,此 时 
只 能 通过 JavaScript 脚本 动态 修改 表单 的 action 属性 来 实现 。 在 HTML 5 规范 中 为 input 
元 素 提 供 了 formaction 属性 ,通过 formaction 属性 可 以 为 每 个 按钮 单独 设置 一 个 提交 地 
址 , 当 单 击 不 同 的 按钮 时 会 将 表单 中 的 数据 提交 到 不 同 的 服务 端 。 

【示例 】 formaction 属性 的 用 法 


< form class = "basic - grey"> 
<h2 > 直播 友情 频道 </h2 > 
< input type= "submit" value = " 斗 鱼 直播 " class = "button" 
formaction = "http://www. douyutv. com/" /> 
< input type = "submit" value = "虎牙 直播 " class = "button" 
formaction = "http://www. huya. com/" /> 
< input type = "submit" value = "芒果 直播 " class = "button" 
formaction = "http://www. mgtv. com" /> 
</form> 


4. formmethod 属性 

在 HTML 4 中 ,表单 的 提交 方式 只 能 使 用 method 属性 来 统一 指定 。 在 HTML 5 中 ， 
可 以 通过 formmethod 属性 为 表单 指定 不 同 的 提交 方式 。 

【示例 】 formmethod 属性 的 用 法 


< form action = "/broadcast. jsp" class = "basic - grey"> 
用 户 名 : < input type = "text"” name = "anchor" placeholder = "请 输入 主播 大 名 " /> 
< input type = "submit" value = "GET 提交 "class = "button" formmethod = "get" /> 
< input type = "submit" value = "POST 提交 " class = "button”formmethod = "post" /> 
</form> 


5. width 和 height 属性 

图 像 按钮 也 是 一 种 提交 按钮 .HTML 5 规范 中 为 其 新 增 了 width 和 height 属性 ; 通过 
width 和 height 属性 为 图 像 按钮 指定 宽度 与 高 度 ; 当 单 击 图 像 按钮 时 ,对 表单 进行 提交 。 

【示例 】 图 像 按 钮 的 用 法 


< input type = "image" src = "images/amuse. jpg" width = "100px" height = "42px" /> 


6， placeholder 属性 

placeholder 属性 是 一 个 非常 有 用 的 属性 ,用 于 设置 文本 框 的 提示 (hint) 信息; 在 输入 
信息 之 前 ,提供 一 个 友好 的 提示 信息 ; 在 文本 框 中 输入 信息 时 ,提示 信息 将 会 自动 消失 。 

【示例 】 placeholder 属性 的 用 法 


< input type = "text" name = "anchor”placeholder = "请 输入 主播 大 名 " /> 


7. required 属性 
HTML 5 中 新 增 了 required 属性 ,用 于 设置 表单 控件 在 提交 表单 时 是 否 需 要 进行 空 验 
证 。 例 如 ,文本 框 具 有 required 属性 且 文 本 为 空 , 在 表单 提交 时 将 阻止 表单 的 提交 ,并 弹出 
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相应 的 提示 信息 。 
【示例 】 required 属性 的 用 法 


< input type = "text" name = "anchor" required/> 
< input type = "text" name = "anchor" required = "required"/> 


8. pattern 属性 
HTML 5 新 增 了 pattern 属性 ,用 于 指定 文本 域 的 匹配 模式 (pattern)。 当 文本 域 的 内 


容 不 符合 匹配 模式 时 ,将 弹出 由 title 属性 预先 设置 的 提示 信息 ,并 阻止 表单 的 提交 。 
【案例 3-16】 pattern. html 


< form action = "/broadcast. jsp" class = "basic - grey"> 
< label >< span> 主 播 大 名 : </span> 
< input type = "text" name = "anchor" placeholder = "请 输入 主播 大 名 " 


title = "请 输入 5 位 以 上 的 字母 ,数字 的 混合 字符 "required = "required" 
pattern="([A-Z]|[a- z]|[0- 9]){5,}"/></label> 


< label >< span > 直播 密码 : </span> 
< input type = "text" name = "broadCastPwd"/></label > 


< label >< span> gnbsp;</span> 
< input type = "submit" value = "开始 直播 " class = "button" formmethod = "post"/> 


</label> 
</form> 


上 述 代码 中 ,通过 pattern 属性 为 文本 框 设置 了 一 个 正则 表达 式 验 证 模式 ,要 求 所 输入 
的 文本 必须 是 数字 和 字母 的 组 合 , 且 长 度 大 于 等 于 5; 当 输 入 内 容 不 符合 要 求 时 ,弹出 “请 与 
所 请 求 的 格式 保持 一 致 。 请 输入 5 位 以 上 的 字母 ,数字 的 混合 字符 ”提示 信息 ,并 阻止 表单 
的 提交 ,如 图 3-18 所 示 。 





D 127.0.0.1:8020/ 二 5 于 x 
了 CG | @ 127.00.1:8020/ 章 生源 码 /chapter03/pattern 会 | 让 


主 是 大 名 : | gqy 





图 3-18 ”pattern 属性 的 使 用 


3.2.4 HTML 5 表单 验证 


HTML 5 规范 为 表单 提供 了 一 套 简 单 的 验证 方式 ; 在 表单 提交 时 ,会 根据 情况 弹出 一 
些 简单 的 提示 ,如 “请 填写 此 字段 “请 匹配 要 求 的 模式 ”等 信息 。 不 同 的 浏览 器 所 弹出 的 提 
示 内 容 有 所 不 同 , 在 Web 开发 过 程 中 用 户 根 据 项 目的 实际 需要 ,通过 HTML 5 Form 中 的 
checkValidity() 和 setCustomValidity() 方 法 来 自 定义 表单 验证 ,以 保证 不 同 浏 览 器 所 弹出 


(em HTML S 高 级 应 用 与 开发 - 微 课 版 


的 信息 是 一 致 的 。 

1. checkValidity() 方 法 

checkValidity() 方 法 用 来 检测 表单 或 某 个 表单 控件 的 输入 是 否 有 效 , 并 返回 一 个 布尔 
值 ; 当 验 证 通过 时 返回 true, 和 否则 返回 false。 表 单 和 表单 控件 都 可 以 调用 checkValidity() 
衣 法 。 

表单 在 提交 时 ,默认 调用 表单 元 素 的 checkValidity() 方 法 ; 当 方法 返回 true 时 表示 表 
单 验证 通过 ,并 提交 表单 ; 当 方法 返回 false 时 表示 表单 验证 未 能 通过 ,将 阻止 表单 的 提交 
行为 。 

用 户 可 以 根据 实际 需要 ,调用 某 个 表单 控件 的 checkValidity() 方 法 来 对 控件 进行 验 
证 ,使 得 表单 验证 更 加 灵活 。 

2. setCustomValidity() 方 法 

针对 HTML 5 校 验 , 各 浏览 器 均 提供 了 一 套 默认 的 提示 信息 ,不 同 浏览 器 的 提示 信息 
有 所 不 同 。 当 用 户 和 希望 浏览 器 提供 统一 的 提示 信息 时 ,可 以 通过 setCustomValidity() 方 法 
来 “定制 "统一 的 提示 信息 。 

使 用 setCustomValidity() 方 法 除了 能 够 设置 提示 信息 外 ,还 会 将 表单 状态 设 为 未 通过 
验证 状态 。 一 般 情况 下 ,在 表单 或 表单 控件 未 通过 验证 时 调用 setCustomValidity() 方 法 ， 
否则 会 将 已 通过 验证 的 表单 变 成 验证 未 通过 状态 。 

【案例 3-17】 customValidate. html 


< form action = "/broadcast. jsp" class = "basic - grey" method = "post"> 
< label >< span> 主 播 大 名 : </span> 
< input type = "text"” id = " anchor" placeholder = "请 输入 主播 大 
名 "required 
pattern= "([R-2Z]|[a-z]l|[0-9]){5,}"/></label> 
< label >< span> 直 播 密码 : </span> 
< input type = "text" id = "broadCastPwd" pattern= "[0-9]{5,8}"/></label> 
< label >< span> &nbsp;</span> 
< input type = "submit" value = "开始 直播 " onclick = "checkForm()"/> 
</label> 
</form> 
<script> 
function checkForm( ){ 
Var anchor = document. getElementById( "anchor" ); 
Var broadCastPwd = document. getElementById( "broadCastPwd" ); 
// 当 直播 大 名 没有 通过 验证 时 
if(!anchor. checkValidity()){ 
anchor. setCustomValidity(" 用 户 名 必须 是 5 位 以 上 的 字母 或 数字 !"); 





} 
if(broadCastPwd. value. length== 0){ 
broadCastPwd. setCustomValidity(" 直 播 密 码 不 能 为 空 !"); 
jelse if(!broadCastPwd. checkValidity()){ 
broadCastPwd. setCustomValidity(" 直 播 密码 必须 是 5 一 8 位 数字 !"); 
} 
} 


</script> 
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上 述 代码 中 ,通过 setCustomValidity() 方 法 来 自 定义 用 户 的 提示 信息 ,有 效 地 解决 了 
浏览 器 提示 信息 的 差异 化 问题 。 代 码 运行 结果 如 图 3-19 所 示 。 


D 127.0.0.1:8020/ 斌 五 源 = x 





了 C | @ 127.00.1:8020/ 齐 源码 /chapter03/customValidate html 女 | 让 











| 用 户 名 必须 是 5 位 以 上 的 字母 或 数 
主 明 大 名 : 请 纺 入 主 无 大 名 | 9 字 ! 





[ 
| 加 直 括 斌 码 不 能 为 空 ! 


| 回 直 揪 密码 必须 是 5~8 位 数字 ! 








图 3-19 HTML 5 自 定 义 表单 验证 


本 章 总 结 


HTML 表单 主要 包含 表单 元 素 和 表单 控件 两 大 类 ,表单 控件 又 细 分 为 表单 域 和 按 
钮 两 种 类 型 。 

HTML 5 对 表单 元 素 功能 进行 强化 ,大 幅度 地 改善 了 表单 元 素 的 功能 ,使 得 表单 的 
开发 更 加 方便 ,快捷 。 

HTML 5 对 表单 进行 了 改进 ,允许 表单 控件 位 于 页 面 的 任意 位 置 ,通过 表单 控件 的 
form 属性 来 指明 该 控件 隶属 哪个 表单 ,使 得 表单 布局 更 加 灵活 。 

HTML 5 中 新 增 了 required 属性 ,用 于 设置 在 表单 提交 时 是 否 需要 对 表单 控件 进行 
HTML 5 规范 为 表单 元 素 新 增 了 autocomplete 和 novalidate 属性 , 且 不 再 支持 
accept 属性 。 

HTML 5 规范 为 input 类 型 的 表单 控件 新 增 了 许多 属性 , 如 autofocus form、 
formaction、pattern 和 required 等 属性 。 

checkValidity() 方 法 用 来 检测 表单 或 某 个 表单 控件 的 输入 是 否 有 效 。 

当 用 户 希 望 浏览 器 提供 统一 的 提示 时 ,可 以 通过 setCustomValidity() 方 法 来 “定制 ” 
统一 的 提示 信息 。 


本 章 练习 


中 类 型 的 input 元素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 , 其 外 观 与 
text 类 型 的 文本 框 基本 相同 ,多 用 于 移动 界面 设计 。 
A. search B. find C. get D. range 
2. 类 型 的 input 元 素 是 一 种 专门 用 来 输入 电话 号 码 的 文本 框 ,其 外 观 与 text 
类 型 的 文本 框 基本 相同 ,多 用 于 移动 界面 设计 。 当 该 类 型 的 文本 框 获得 焦点 时 ,将 弹出 一 个 


( 56 ”HTML 5 高 级 应 用 与 开发 - 微 课 版 


数字 类 型 的 输入 键盘 ,在 键盘 的 右 下 角 提供 “下 一 步 ” 按 键 。 
A. phone B. number C. tel D. telephone 
: 类 型 的 input 元 素 一 般 用 于 生成 一 个 数字 滑动 条 ,来 输入 特定 范围 的 数值 。 
A. number B. range C. datalist D. slider 
4. 在 HTML 5 表单 属性 中 ， 属性 用 于 设置 form 元 素 和 input 元 素 是 否 能 够 
自动 完成 。 
A. autoachieve B. autodone C. autoaccomplish D. autocomplete 
5. 属性 是 一 个 非常 有 用 的 属性 ,用 于 设置 文本 框 的 提示 (hint) 信 息 。 
A. hint B. placeholder C. reminder D. placeInfo 
6. 表单 域 是 一 些 用 于 实现 用 户 输入 的 组 件 , 其 中 包括 文本 框 、 \ 单 选 按钮 、 
\ 下 拉 列 表 框 、 多 行文 本 框 、 等 控件 。 
7. 按钮 分 为 \ 重 置 按钮 、 \ 普 通 按钮 等 类 型 。 
8. 类 型 的 input 元 素 是 一 组 用 于 输入 日 期 和 时 间 的 文本 框 , 其 中 类 
型 用 于 选取 年 月、 日 ， 类 型 用 于 选取 年 和 月 ， 类 型 用 于 选取 年 和 周 ， 
类 型 用 于 选取 时 间 ( 包 括 小 时 和 分 钟 )， 用 于 选取 年 .月 .日 及 时 间 。 
9. 方法 用 来 检测 表单 或 某 个 表单 控件 的 输入 是 否 有 效 ; 当 用 户 和 希望 浏览 器 
提供 统一 的 提示 时 ,可 以 通过 方法 来 “定制 "自己 的 错误 提示 信息 。 








Canvas 绘 图 | 


人 AS 本 章 目标 


。 了 解 Canvas 绘图 原理 。 

。 掌握 Canvas 元 素 及 Canvas 坐标 系 。 

。 掌握 矩形 和 文本 的 绘制 方法 。 

。 熟悉 直线 .折线 、 弧 线 及 贝 塞 尔 曲线 的 绘制 方法 。 
。 掌握 图 像 绘制 及 像素 处 理 方法 。 

。 了 解 图 形 合成 原理 。 

。 熟悉 图 形 的 旋转 、 缩 放 和 偏 移 。 

。 熟悉 线性 渐变 和 径 向 渐变 。 


4.1 Canvas 元 素 


HTML 5 规范 新 增 了 Canvas 元 素 , 用 于 实现 网 页 中 的 绘图 功能 。Canvas 元 素 本 身 是 
一 种 普通 的 HTML 元 素 , 仅 能 用 于 指定 绘制 的 区 域 ( 又 称 画 布 ), 画 布 本 身 不 具有 绘制 功 
能 。 当 需要 在 画布 中 绘制 内 容 时 ,需要 借助 JavaScript 技术 来 实现 图 形 图 像 的 绘制 。 

与 普通 的 HTML 元 素 相似 ,Canvas 元 素 也 具有 id、style、class 和 hidden 等 通用 属性 ; 
除 此 之 外 ,Canvas 元 素 还 有 width 和 height 属性 ,width 属性 用 于 设置 画布 的 宽度 ,height 
属性 用 于 设置 画布 的 高 度 。 当 Canvas 元 素 没 有 提供 width 和 height 属性 时 ,Canvas 默认 
初始 化 宽度 为 300 像素 .高度 为 150 像素 。 

使 用 CSS 样式 来 设置 Canvas 元 素 的 大 小 时 ,所 绘制 的 图 像 会 根据 比例 进行 缩放 以 适 
应 画布 尺寸 ; 当 CSS 中 的 尺寸 与 初始 画布 的 比例 不 一 致 时 ,将 会 发 生 图 像 变形 。 





仿 通常 使 用 Canvas 元 素 的 width 和 height 属性 来 设置 画布 的 大 小 。 尽 量 避 免 使 用 
CSS 样式 来 设置 Canvas 元 素 , 以 免 所 绘制 的 图 形 图 像 发 生变 形 。 


下 述 代码 演示 了 使 用 Canvas 元 素来 创建 一 个 画布 ,然后 在 画布 中 绘制 一 个 橙色 的 矩 
形 框 。 
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【案例 4-1】 canvasDefault. html 


<style type= "text/css"> 
canvas{ 
border: lpx solid #A4A4A4; 
border — radius: 5px; 
box — shadow: 1px 2px #555555; 


| 
</style> 
< canvas id = "myCanvas" width="300px" height = "200px"></canvas> 
< Script> 


Var canvas = document. getElementById("myCanvas" ); 
Var context = canvas. getContext("2d"); 
context. strokeStyle = "#CC8866"; 
context. lineWidth = 6; 
context. strokeRect(30, 30,150,100); 
</script > 





上 述 代 码 中 ,使 用 Canvas 元 素 创建 了 一 个 画布 ,画布 的 宽度 为 300 像素 .高度 为 200 像 
素 。 在 绘制 图 形 之 前 , 先 通过 document. getElementByld ("myCanvas") 方 法 获得 一 个 
HTMLCanvasElement 类 型 的 canvas 对 象 , 然 后 通过 canvas 对 象 的 getContext("2d") 方 法 


来 得 一 个 CanvasRenderingContext2D 类 型 的 context 对 象 。 


在 context 对 象 中 提供 了 许多 属性 和 方法 ,用 于 实现 图 形 图 像 的 绘制 。 其 中 ， 
strokeStyle 属性 用 于 设置 画笔 的 颜色 ,lineWidth 属性 用 于 设置 画布 的 粗 度 , strokeRect() 
方法 用 于 绘制 一 个 矩形 。 上 述 代 码 运 行 结果 如 图 4-1 所 示 , 外 层 区 域 是 Canvas 画布 的 边 





框 ,在 画布 的 坐标 位 置 (30,30) 处 绘制 了 一 个 宽度 150px、 高 度 100px 的 矩形 。 
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图 4-1 Canvas 画布 


4.1.1 HTMLCanvasElement 


在 DOM Canvas 元 素 中 提供 了 HTMLCanvasElement 接口 ,该 接口 提供 了 Canvas 元 
素 的 布局 与 呈现 的 操作 方法 。 而 HTMLCanvasElement 接口 继承 于 Element 接口 ,具有 


Element 接口 的 属性 和 方法 。 在 Element 接口 中 ,常用 的 属性 见 表 4-1。 
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表 4-1 Element 接口 的 常用 属性 























属 性 描 述 
attributes 返回 指定 节点 的 属性 集合 
childNodes 标准 属性 ,返回 直接 后 代 的 元 素 节 点 和 文本 节点 的 集合 ,类 型 为 NodeList 
children 非 标准 属性 ,返回 直接 后 代 的 元 素 节点 的 集合 ,类 型 为 Array 
innerHTML 设置 或 返回 元 素 的 内 部 HTML 
className 设置 或 返回 元 素 的 class 属性 
firstChild 返回 指定 节点 的 首 个 子 节点 
lastChild 返回 指定 节点 的 最 后 一 个 子 节点 





nextSibling 


返回 同一 父 节点 的 指定 节点 之 后 紧 跟 的 节点 





previousSibling 


返回 同一 父 节点 的 指定 节点 的 前 一 个 节点 














parentNode 返回 指定 节点 的 父 节 点 ; 没有 父 节点 时 , 则 返回 null 
nodeType 返回 指定 节点 的 节点 类 型 (数值 ) 

nodeValue 设置 或 返回 指定 节点 的 节点 值 

tagName 返回 元 素 的 标签 名 (始终 是 大 写 形式 ) 





在 Element 接口 中 ,常用 的 方法 见 表 4-2。 


表 4-2 Element 接口 的 常用 方法 





























方 法 描 述 
getAttribute() 返回 指定 属性 对 应 的 属性 值 
getElementsByTagName() 返回 具有 指定 标签 名 的 元 素 子 元 素 集合 ,类 型 为 NodeList 
hasAttribute() 指定 属性 存在 时 返回 true, 否 则 返回 false 
hasChildNodes() 检查 元 素 是 否 有 子 节点 
removeAttribute() 删除 指定 的 属性 
removeChild() 删除 某 个 指定 的 子 节点 ,并 返回 该 节点 
replaceChild() 用 新 节点 替换 某 个 子 节点 
setAttribute() 为 节点 添加 属性 ; 当 属性 存在 时 , 则 进行 替换 


除了 继承 Element 接口 中 的 属性 外 ,HTMLCanvasElement 接口 中 还 提供 了 width 和 
height 属性 ,具体 见 表 4-3。 


表 4-3 HTMLCanvasElement 接口 的 属性 











属性 描 述 
height 对 应 Canvas 元 素 的 height 属性 值 ,用 于 指定 该 元 素 所 占 的 高 度 ,单位 为 像素 
width 对 应 Canvas 元 素 的 width 属性 值 ,用 于 指定 该 元 素 所 占 的 宽度 ,单位 为 像素 


除了 继承 Element 接口 中 的 方法 外 ,HTMLCanvasElement 接口 还 提供 了 getContext()、 
toDataURL() 等 方法 ,具体 见 表 4-4。 
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表 4-4 HTMLCanvasElement 接口 的 方法 


方 法 描 述 
getContext(contextId) | 返回 Canvas 的 绘制 上 下 文 对 象 
返回 一 个 data:URL, 根 据 type 参数 指定 的 类 型 将 包含 在 Canvas 中 的 图 片 文 
件 编码 成 字符 串 形 式 。type 参数 的 默认 值 为 image/png 
返回 一 个 Blob 对 象 , 包 含 在 该 Canvas 中 的 图 片 文件 。 浏 览 器 根据 自身 情况 
将 文件 可 以 缓存 在 硬盘 或 内 存 中 。type 参数 的 默认 值 为 image/png 








toDataURL(type) 





toBlob(callback, type) 





下 述 代码 演示 了 HTMLCanvasElement 接口 的 属性 及 方法 的 使 用 。 
【案例 4-2〗 canvas2URL. html 


< canvas id = "myCanvas" width = "200px"”height = "150px"></canvas > 
< Script> 

var canvas = document. getElementById("myCanvas" ); 

var context = canvas. getContext("2d"); 

context. fillStyle = "#CC8866"; 

context. fillRect(0,0, canvas. width, canvas. height ); 


var Url = canvas. toDataURL( ) ; 

var newImg = document. createElement ("img"); 

newImg. src = url; 

document. body. appendChild(newImg); 
</script> 


上 述 代码 中 ,使 用 fillRect() 方 法 在 画布 上 填充 一 个 矩形 ,并 使 其 充满 整个 画布 ; 使 用 
toDataURL() 方 法 为 Canvas 元 素 返 回 一 个 data: URL 地 址 引用 ,以 便 img 元 素来 引用 。 接 
下 来 ,使 用 document. createElement("img") 方 法 创建 一 幅 图 像 ,将 data: URL 作为 该 图 像 
的 URL 地址。 代码 运行 结果 如 图 4-2 所 示 , 由 于 左 侧 画 布 使 用 CSS 样式 设置 圆 角 效果 ,而 
新 创建 的 图 像 没 有 设置 任何 样式 ,所 以 视觉 上 存在 一 定 的 差异 。 

[SJEIET 要 
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图 4-2 HTMLCanvasElement 的 属性 和 方法 


4.1.2 CanvasRenderingContext2D 


通过 HTMLCanvasElement 对 象 的 getContext(contextID) 方 法 来 返回 一 个 具有 绘图 
功能 的 context 对 象 ,为 不 同 的 环境 (2D 或 3D) 提 供 不 同 的 绘制 类 型 。 目 前 浏览 器 仅 支持 绘 
制 二 维 图 像 ,而 3D 为 未 来 HTML 5 三 维 绘制 预 留 扩展 空间 。 在 getContext() 方 法 中 ,参数 
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contextID 取 值 范围 是 2d 或 3d, 当 contextID 为 2d 时 , getContext() 方 法 返回 一 个 
CanvasRenderingContext2D 类 型 的 对 象 ,用 于 绘制 二 维 图 形 。CanvasRenderingContext2D 
对 象 的 属性 见 表 4-5。 


表 4-5 CanvasRenderingContext2D 对 象 的 属性 














属 性 描 述 
canvas 只 读 属 性 ,用 于 返回 对 应 的 HTMLCanvasElement 元 素 
fillStyle 用 于 设置 填充 的 样式 , 取 值 可 以 是 颜色 或 模式 
font 用 于 设置 绘制 文本 时 所 采用 的 字体 
用 于 指定 在 画布 上 绘制 内 容 的 透明 度 , 取 值 范围 为 0. 0 一 1. 0, 其 中 ,0.0 表 
globalAlpha 


示 完 全 透明 ,1.0 表示 完全 不 透明 ,默认 为 1.0 
用 于 设置 在 绘制 新 形状 时 所 采用 的 全 加 方式 ,包括 source-over、 destination- 


globalCompositeOperation | over、 source-atop、 destination-atop、source-in、destination-in、source-out、 





destination-out ,lighter\copy 和 xor 


用 于 设置 线段 端点 的 绘制 形状 , 取 值 可 以 是 butt( 默 认 ,不 绘制 端点 ) ,square 





lineCap 
































(方形 端点 ) 和 round( 圆 形 端点 ) 

lineDashOffset 用 于 设置 虚线 偏 移 量 ,配合 setLineDash() 方 法 一 起 使 用 

dh 用 于 设置 线段 、 圆 弧 、 曲 线 之 间 连 接点 的 风格 , 取 值 可 以 是 miter (锐角 )、 
round( 圆 角 ) ,bevel( 切 角 ) 

lineWidth 用 于 设置 画笔 的 线条 宽度 ,该 属性 必须 大 于 0.0, 默 认 是 1.0 

miterLimit 当 lineJoin 属性 为 miter 时 ,该 属性 用 于 控制 锐角 箭头 的 长 度 

shadowBlur 用 于 设置 阴影 的 模糊 程度 ,默认 值 为 0 

shadowColor 用 于 设置 阴影 的 颜色 ,默认 值 为 black 

shadowOffsetX 用 于 设置 阴影 的 水 平 偏 移 距离 ,默认 值 为 0 

shadowOffsetY 用 于 设置 阴影 的 垂直 偏 移 距 离 ,默认 值 为 0 

StrokeStyle 用 于 设置 画笔 (绘制 图 形 ) 的 样式 ,可 以 是 颜色 或 模式 ,默认 值 为 "# 000" 

textAlign 在 绘制 文本 时 ,设置 文本 的 对 齐 方式 , 取 值 为 start .end ,left\right 和 center 





在 绘制 文本 时 ,设置 当前 文本 的 基线 , 取 值 为 top、middle、bottom、 hanging、 


textBaseAli 
Pe alphabetic 和 ideographic 





在 CanvasRenderingContext2D 对 象 中 ,提供 了 许多 绘制 方法 ,用 于 绘制 矩形 文字、 图 
片 、 直 线 和 曲线 等 图 形 ,具体 见 表 4-6。 


表 4-6 CanvasRenderingContext2D 对 象 的 方法 





























方 法 描 述 
arc() 根据 圆心 半径、 开始 角度 、 结 束 角度 绘制 方向 来 绘制 一 条 圆 弧 路 径 
arcTo() 使 用 切 点 和 半径 ,绘制 一 条 圆 弧 路 径 
beginPath() 在 一 个 画布 中 ,在 结束 一 条 路 径 的 同时 新 定义 一 条 路 径 
bezierCurveTo() 用 于 绘制 三 次 贝 塞 尔 曲线 路 径 
clearRect() 将 指定 矩形 区 域内 的 所 有 像素 变 成 透明 , 擦 除 之 前 绘制 的 所 有 内 容 
clip() 将 当前 创建 的 路 径 设置 为 当前 剪 切 路 径 
closePath() 将 笔 点 返回 到 当前 子路 径 起 始点 ,并 关闭 所 定义 的 路 径 
创建 一 个 新 的 、 空 白 的 ,指定 大 小 的 ImageData 对 象 ,该 对 象 中 所 有 的 像素 都 
createImageData() 是 透明 的 
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续 表 





关闭 


描 述 





createLinearGradient() 


创建 一 个 沿 参数 坐标 所 指定 直线 的 线性 渐变 





createPattern() 


使 用 指定 的 图 像 创建 一 种 平 铺 模 式 , 可 以 是 repeat、 repeat-x、repeat-y 或 


no-repeat 





createRadialGradient() 


根据 参数 确定 两 个 圆 的 坐标 ,创建 一 个 放射 性 渐变 



































drawFocusIfNeeded() 为 当前 路 径 或 特定 路 径 绘 制 焦点 

drawJImage() 在 Canvas 中 绘制 一 幅 图 像 

ellipse() 根据 圆心 .半径 、 开 始 角度 、 结 束 角度 绘制 方向 来 绘制 椭圆 路 径 
fl() 使 用 fillStyle 属性 所 指定 的 填充 样式 来 填充 当前 或 已 存在 的 路 径 
fillRect() 使 用 fillStyle 属性 所 指定 的 填充 样式 来 填充 指定 的 矩形 
fillText() 使 用 fillStyle 属性 所 指定 的 填充 样式 来 填充 文本 

getImageData() 从 上 下 文 context 对 象 中 ,根据 指定 区 域 返回 一 个 ImageData 对 象 
getLineDash() 返回 当前 线段 的 绘制 样式 

lineTo() 绘制 一 条 直线 

moveTo() 将 当前 路 径 的 结束 点 移动 到 指定 的 位 置 

putImageData() 将 已 有 的 ImageData 对 象 绘制 到 Canvas 画布 中 





quadraticCurveTo() 


为 当前 路 径 添加 一 个 二 次 贝 塞 尔 曲线 





rect() 


向 当前 路 径 中 添加 一 个 矩形 路 径 





restore() 


从 绘图 状态 栈 中 弹出 顶部 的 状态 ,将 Canvas 恢复 到 最 近 的 保存 状态 





rotate() 


旋转 画布 的 坐标 系统 ,参数 是 一 个 顺 时 针 旋 转角 度 并 且 用 弧度 





save() 


将 当前 状态 放 人 绘图 状态 栈 中 ,保存 Canvas 全 部 状态 





scale() 


根据 x 水 平方 向 和 y 垂直 方向 ,缩放 画布 的 用 户 坐 标 系统 





setLineDash() 


设置 虚线 的 样式 





stroke() 


根据 当前 的 画 线 样式 ,绘制 当前 或 已 经 存在 的 路 径 





StrokeRect() 


使 用 当前 的 绘画 样式 ,绘制 一 个 矩形 框 (并 不 填充 矩形 的 内 部 





strokeText() 


在 指定 的 位 置 绘制 文本 的 线条 





translate() 





平移 画布 的 用 户 坐 标 系统 


针对 上 述 CanvasRenderingContext2D 对 象 的 方法 .从 功能 上 分 为 绘制 矩形 、 文 本 、 路 
径 、 图 像 .渐变 效 果 、 图 形变 换 等 方法 。 


4.1.3 Canvas 坐标 系 


在 Canvas 画布 中 ,坐标 原点 (0,0) 位 于 画布 的 左上 角 ,X 轴 沿 着 水 平方 向 向 右 延 伸 ,Y 
轴 沿 垂直 方向 向 下 延伸 ,如 图 4-3 所 示 。 在 默认 坐标 系 中 ,每 一 个 点 的 坐标 都 直接 映射 到 一 


个 CSS 像素 。 


图 像 的 每 次 绘制 都 参考 一 个 固定 点 将 会 缺少 灵活 性 , 故 在 Canvas 画布 中 引入 “当前 坐 
标 系 ” 的 概念 。 所 谓 “ 当 前 坐标 系 ”是 指 在 图 像 自 身 绘制 时 所 参考 的 坐标 系 , 该 坐标 系 的 默认 
原点 位 于 图 像 的 左上 角 , 同 样 X 轴 沿 着 水 平方 向 向 右 延 伸 ,Y 轴 沿 垂直 方向 向 下 延伸 ,如 


图 4-4 所 示 。 
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Canvas 坐 标 原点 (0, 0) x 
(0.0) X 人 





y! 
x 当前 举 标 系 原点 (0, 0) 























图 4-3 ”Canvas 坐标 系 图 4-4 当前 坐标 系 


4.2 绘制 矩形 


在 CanvasRenderingContext2D 对 象 中 ,提供 了 strokeRect() ,fillRect() 和 clearRect() 
三 个 绘制 矩形 的 方法 。 

1. strokeRect() 方 法 

strokeRect() 方 法 用 于 根据 strokeStyle 属性 所 设 定 的 画笔 样式 来 绘制 一 个 矩形 ,矩形 
的 中 心 区 域 并 不 进行 填充 ,语法 格式 如 下 。 

【语法 】 


void ctx. strokeRect(x, y, width, height) 


其 中 : 

。 参数 x、y 表示 绘制 矩形 的 起 点 坐标 (x,y); 

。 参数 width 和 height 分 别 表示 绘制 矩形 的 宽度 和 高 度 。 

使 用 strokeRect() 方 法 绘制 矩形 时 ,需要 预先 设置 画笔 的 样式 .粗细 以 及 连接 点 的 风 
格 ; 其 中 ,strokeStyle 属性 用 于 设置 画笔 (绘制 图 形 ) 的 样式 , 取 值 可 以 是 某 种 颜色 或 模式 ， 
默认 值 为 “#000”( 黑 色 ); lineWidth 属性 用 于 设置 画笔 的 粒度 ; lineJoin 属性 用 于 设置 线 
段 、 圆 弧 .曲线 之 间 连 接点 的 风格 , 取 值 可 以 是 miter( 锐 角 ) .round( 圆 角 ) .bevel( 切 角 ) 。 

下 述 代码 演示 了 使 用 strokeRect() 方 法 来 绘制 一 个 矩形 。 

【案例 4-3】 drawRect. html 


< canvas id = "myCanvas" width = "500px" height = "200px"></canvas > 
< Script> 

Var canvas = document. getElementById("myCanvas" ); 

Var context = canvas. getContext("2d" ) 7 

// 设 置 画 笔 的 颜色 

context. strokeStyle = "#662266"; 

// 设 置 画 笔 的 大 小 

context. lineWidth= 15; 

context. lineJoin = "bevel" 

context. strokeRect(30, 30,120,120); 
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Ye 


形 。 


// 设 置 画 笔 

context. strokeStyle = "blue"; 
context. lineWidth= 15; 

context. lineJoin= "miter” 

context. strokeRect(180, 30,120,120); 


// 设 置 画 笔 

context. strokeStyle = "black"; 

context. lineWidth= 15; 

context. lineJoin = "round" 

context. strokeRect(330,30,120,120); 
</script > 


上 述 代 码 运 行 结果 如 图 4-5 所 示 ,在 画布 中 分 别 绘制 了 切 角 、 锐 角 和 圆 角 三 种 类 型 的 矩 

















在 每 次 绘制 之 前 需要 对 画笔 进行 设置 ,否则 将 继续 使 用 上 次 画笔 的 样式 风格 进行 绘制 。 
LIEIGT 3 
yD ape x 
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图 4-5 绘制 矩形 


























2. fillRect() 方 法 
各 IRect() 方 法 根据 fillStyle 属性 所 设 定 的 填充 样式 来 填充 一 个 矩形 区 域 , 语 法 格式 


如 下 。 


由 


【语法 】 
void ctx. fillRect(x, y, width, height) 


其 中 ， 
。 参数 x、y 表示 填充 矩形 的 起 点 坐标 (x,y); 

。 参数 width 和 height 分 别 表 示 填 充 矩形 的 宽度 和 高 度 。 

当 使 用 filRect() 方 法 来 填充 一 个 矩形 区 域 时 ,可 以 通过 fillStyle 属性 设置 填充 的 样 
下 述 代 码 演示 了 使 用 fllRect() 方 法 来 实现 一 个 6X6 的 简单 调 色 板 。 

【案例 4-4】 fillRect. html 

< canvas id = "myCanvas" width= "300px" height = "200px"></canvas > 


< Script> 
var canvas = document. getElementById("myCanvas" ); 
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var context = canvas. getContext("2d"); 
var x=70,y= 20; 
for(var i=0; i<6; i++){ 
for(var j=0; j<6; j++){ 
context. fillStyle = 'rgb('+ Math. floor(255— 42.5*i)+'," 
+ Math. floor(255 — 42.5*j)+',100)'; 
context. fillRect(x+ j*25, y+ix25,24,24); 
} 
} 
</script> 


上 述 代 码 中 ,通过 for 循环 嵌 套 来 绘制 一 个 简单 调 色 板 ; 在 每 次 绘制 之 前 ,计算 出 下 次 
绘制 时 的 画笔 颜色 ,然后 绘制 一 个 矩形 小 方块 。 代 码 运行 结果 如 图 4-6 所 示 。 
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图 4-6 简单 调 色 板 ( 见 彩 插 ) 


3. clearRect() 方 法 

clearRect() 方 法 用 于 将 指定 矩形 区 域内 的 所 有 像素 变 为 透明 效果 ,从 而 实现 该 区 域 的 
擦 除 效果 ,语法 格式 如 下 。 

【语法 】 


void ctx. clearRect(x, y, width, height) 


其 中 : 

。 参数 xy 表示 擦 除 和 矩形 区 域 的 起 点 坐标 (x,y); 

。 参数 width 和 height 分 别 表示 擦 除 和 矩形 区 域 的 宽度 和 高 度 。 
下 述 代码 演示 了 使 用 clearRect() 方 法 来 擦 除 画 布 的 指定 区 域 。 
【案例 4-5】 clearRect. html 


<canvas id = "myCanvas" width = "300px" height = "200px"></canvas > 
< Script> 

var canvas = document. getElementBYId("myCanvas" ); 

Var context = canvas. getContext("2d"); 

context. fillStyle = "yellowgreen"; 
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context. fillRect(20, 20,100,100); 
context. fillStyle = "darkcyan"; 
context. fillRect(60, 60,100,100); 


context. clearRect(80,80,60,40); 
</script> 


上 述 代码 中 , 先 使 用 fillRect() 方 法 填充 两 个 矩形 ,然后 使 用 clearRect() 方 法 擦 除 指定 


的 区 域 ,该 方法 将 两 次 填充 的 矩形 区 域 一 并 擦 除 , 擦 除 区 域 将 呈现 画布 的 背景 颜色 ,效果 如 
图 4-7 所 示 。 
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4.3 绘制 文本 


HTML 5 Canvas 提供 了 strokeText() 和 fillText() 两 种 绘制 文本 的 方法 。 在 绘制 文本 
之 前 ,使 用 strokeStyle 属性 来 设置 画笔 的 样式 ,使 用 font 属性 来 设置 字体 , 使 用 
textBaseline 属性 来 设置 文本 的 基线 。 通 过 measureText() 方 法 返回 一 个 TextMetrics 类 型 
的 对 象 ,该 对 象 的 width 属性 可 以 返回 被 测量 文本 的 宽度 (使 用 CSS 像素 计算 ) 。 

1. strokeText() 方 法 

strokeText() 方 法 根据 当前 的 font、textAlign 和 textBaseline 等 属性 所 设置 的 样式 对 
文本 进行 泻 染 ,语法 格式 如 下 。 
【语法 】 


void ctx. strokeText (text, x, y[, maxWidth]) 


其 中 : 
。 参数 text 表示 所 要 绘制 的 文本 ; 
。 参数 x、y 表示 绘制 文本 的 坐标 位 置 (x,y); 


。 参数 maxWidth( 可 选 ) ,表示 人 允许 的 最 大 文本 宽度 ,单位 为 像素 。 
下 述 代码 演示 了 使 用 strokeText() 方 法 来 绘制 文本 。 


【案例 4-6】 strokeText. html 


< canvas id = "myCanvas" width = "320px" height = "100px"></canvas > 
< script> 

Var canvas = document. getElementById("myCanvas" ) ; 

Var context = canvas. getContext("2d"); 

var text = "Cuckoo - OnLine"; 

var x= 20,y= 20, height = 55; 

context. fillStyle = "lightgray"; 

context. font = height + "px Giddyup Std"; 


var measureText = context. measureText (text); 
// 绘 制 文字 背景 区 域 
context,. fillRect(x, y, measureText. width, height) 


// 设 置 画笔 的 颜色 

context. strokeStyle = " #662266"; 
// 设 置 画笔 的 大 小 

context. lineWidth = 2; 

context. lineJoin = "bevel"; 


context. textBaseline = "top"; 


context. strokeText (text, x, Y); 
</script> 


上 述 代码 中 ,使 用 measureText() 方 法 来 测量 绘制 
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文本 的 宽度 ,并 为 所 绘制 的 文本 填充 背景 颜色 。 在 绘 
制 之 前 ,将 文本 的 字体 进行 如 下 设置 : 55px Giddyup 
Std 类 型 的 字体 、 画 笔 宽度 为 2、 颜色 为 "#662266"、 文 
本 基线 为 top ,代码 运行 结果 如 图 4-8 所 示 。 

textBaseline 属性 的 取 值 范围 是 alphabetic ( 默 
认 ) top hanging .middle ideographic 和 bottom ,每 个 
属性 值 对 应 的 效果 如 图 4-9 所 示 。 
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4-8 绘制 文本 





图 4-9 textBaseline 属性 值 对 应 的 效果 


下 述 代 码 演示 了 textBaseline 属性 的 各 种 取 值 情况 。 
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【案例 4-7】 textBaseline. html 


<canvas id = "myCanvas" width = "420" height = "200"></canvas > 
<script> 

Var canvas = document. getElementById( "myCanvas" ); 

Var context = canvas. getContext("2d"); 

var y= 100, height = 20; 

context. font = height + "px Arial"; 

context. strokeStyle = "blue"; 

context. fillStyle = " # ADD8E6" 

context. lineWidth = 2; 


Var x= 20, text = "Top"; 

drawText (context, text, x, y, "top" ); 

x= 60, text = "Bottom"; 

drawText (context, text, x, y, "bottom" ); 
x=135, text = "Middle"; 

drawText (context, text, x, y, "middle" ); 
x= 210, text = "Alphabetic"; 
drawText(context, text, x, y, "alphabetic"); 
x= 315, text = "Hanging"; 

drawText (context, text, x, y, "hanging" ); 
// 绘 制 一 条 参考 线 

context. lineWidth = 3; 

context. moveTo( 5,100); 

context. lineTo( 410, 100); 

context. stroke( ); 


function drawText (ctx, text, x, y, textBaseline){ 

// 绘 制 文本 背景 区 域 
measureText = context. measureText (text); 
ctx. fillRect (x, Y measureText. width, height); 
// 绘 制 文本 
ctx. textBasel ine = textBasel ine; 
ctx. strokeText (text, x, y); 

</script > 


上 述 代码 运行 结果 如 图 4-10 所 示 。 
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图 4-10 textBaseline 属性 
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在 Canvas 画布 中 ,分 别 绘制 了 具有 top、bottom、middle、alphabetic 和 hanging 基线 的 
文本 ; 通过 比较 参考 线 与 各 种 基线 的 文本 位 置 ,可 以 更 好 地 显示 textBaseline 基线 的 
效果 。 

2. fillText() 方 法 

flText() 方 法 将 根据 填充 方式 来 填充 文字 内 容 ,语法 格式 如 下 。 

【语法 】 


void ctx. fillText (text, x, y[, maxWidth]) 


其 中 : 

。 参数 text 表示 所 要 填充 的 文本 ; 

。 参数 x、y 表示 填充 文本 的 坐标 位 置 (x,y); 

。 参数 maxWidth( 可 选 ) ,表示 允许 的 最 大 文本 宽度 ,单位 为 像素 。 
下 述 代码 演示 了 使 用 fillText() 方 法 来 填充 文本 内 容 。 

【案例 4-8】 fillText. html 


< canvas id = "myCanvas" width = "320px" height = "100px"></canvas > 
< Script> 
var canvas = document. getElementById( "myCanvas" ); 
var context = canvas. getContext("2d" ) 
Var text = "Cuckoo - OnLine" ; 
context. fillStyle = "#662266"; 
context. font = "55px Giddyup Std"; 
context. shadowOffsetX = 5; 
context. shadowOffsetY = 5; 
context. shadowBlur = 5; 
context. shadowColor = "grey" ; 
context. textBaseline = "top"; 
context. fillText(text,20,20); 
</script> 


上 述 代码 中 ,使 用 shadowBlur 属性 来 设置 阴影 的 模糊 程度 ,shadowColor 属性 来 设置 
阴影 的 颜色 ,shadowOffsetX 属性 来 设置 阴影 的 水 平 偏 移 距离 ,shadowOffsetY 属性 来 设置 
阴影 的 垂直 偏 移 距离 。 代 码 运行 结果 如 图 4-11 所 示 。 
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图 4-11 文本 的 填充 
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4.4 绘制 路 径 


在 HTML 5 Canvas 中 ,基本 图 形 都 是 以 路 径 为 基础 ,每 一 条 子路 径 都 是 以 上 一 条 路 径 
的 终点 作为 起 点 ,由 多 条 子路 径 组 合 到 一 起 构成 图 形 ( 即 路 径 ) 。 

CanvasRenderingContext2D 对 象 提供 了 一 系列 方法 ,用 于 绘制 子路 径 ,包括 直线 、 圆 
弧 、 贝 塞 尔 曲线 .矩形 、 椭 圆 等 子路 径 , 具 体 见 表 4-6。 

CanvasRenderingContext2D 对 象 中 还 提供 了 填充 路 径 、 路 径 描 边 等 方法 ; 其 中 ,fill() 
方法 根据 当前 的 填充 样式 来 填充 当前 或 已 存在 的 路 径 ; stroke() 方 法 根据 当前 的 画笔 样式 
来 绘制 当前 或 已 经 存在 的 路 径 。 

1. beginPath() 和 closePath( ) 方 法 

beginPath() 方 法 用 于 结束 当前 子路 径 列表 并 创建 一 个 新 的 路 径 。closePath() 方 法 用 
于 创建 从 当前 点 到 开始 点 的 路 径 , 从 而 形成 封闭 路 径 ; 如 果 图 形 已 经 封闭 或 者 只 有 一 个 点 ， 
那么 此 方法 不 会 做 任何 操作 。 

2. stroke() 和 fill() 方 法 

stroke() 方 法 根据 当前 的 画笔 样式 来 绘制 当前 或 已 经 存在 的 路 径 ; 而 fl() 方 法 根据 当 
前 的 填充 样式 来 填充 当前 或 已 存在 的 路 径 。 

3. moveTo() 和 lineTo() 方 法 

moveTo() 方 法 用 于 将 一 个 新 的 子路 径 的 起 始点 移动 到 指定 的 目标 点 ,而 lineTo() 方 法 
用 于 将 当前 点 与 目标 点 使 用 直线 连接 并 形成 子路 径 。 

下 述 代码 演示 了 绘制 直线 路 径 ,并 实现 了 路 径 描 边 效果 。 

【案例 4-9】 moveTo&lineTo. html 


< canvas id = "myCanvas" width = "320px" height = "150px"></canvas > 
< Script> 

var canvas = document. getElementBYyId("myCanvas" ); 

var context = canvas. getContext("2d"); 

var y= 30; 


var lineCaps = ["round", "butt", "square" ]; 
context. strokeStyle = "darkgreen"; 
for (var i=0;i< lineCaps. length; i++){ 
context. lineWidth= 15; 
context. lineCap = lineCaps[ i]; 
context. beginPath( ); 
context. moveTo(50,y + ix 40); 
context. lineTo(250,y + i* 40); 
context. stroke( ); 
context. closePath( ); // 此 处 可 以 省 略 
yy 


</script> 


上 述 代码 中 分 别 绘制 了 round、butt 和 square 三 种 类 型 的 线条 。 在 每 次 绘制 之 前 使 用 
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lineCap 属性 来 设置 线段 端点 的 形状 ,使 用 beginPath() 方 法 来 创建 一 个 新 的 路 径 , 然 后 通过 
moveTo() 方 法 确定 线条 的 起 始 位 置 ,lineTo () 方 法 确定 线条 的 结束 位 置 ,最 后 使 用 Stroke() 
方法 来 绘制 线段 ,代码 运行 结果 如 图 4-12 所 示 。 
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图 4-12 绘制 直线 


4. ellipse() 和 rect() 方 法 
ellipse() 方 法 用 于 绘制 椭圆 形 的 路 径 , 语 法 格式 如 下 。 
【语法 】 


void ctx. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle 
[,anticlockwise]) 


其 中 : 

。 参数 x、y 表示 椭圆 的 圆心 坐标 (x,y); 

。 参数 radiusX ,radiusY 分 别 表示 椭圆 的 X 轴 和 YY 轴 的 半径 ; 

。 参数 rotation 表示 椭圆 的 旋转 角度 ; 

。 参数 startAngle 表示 所 绘制 圆 弧 的 起 始 角 度 ; 

。 参数 endAngle 表示 所 绘制 圆 弧 的 结束 角度 ; 

。 参数 anticlockwise 可 选 ,用 于 设置 绘制 圆 弧 时 的 方向 ,默认 为 false; 当 取 值 为 true 
时 表示 道 时 针 方 向 绘制 椭圆 , 当 取 值 为 false 时 表示 顺 时 针 方向 绘制 椭圆 ,如 图 4-13 
所 示 。 
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4-13 椭圆 坐标 系 
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下 述 代 码 演 示 了 使 用 ellipse 〇 方法 来 绘制 椭圆 和 圆 弧 路 径 。 
【案例 4-10】 ellipse. html 


<canvas id = "myCanvas" width = "400px" height = "200px"></canvas > 
< Script> 

Var canvas = document. getElementById("myCanvas" ); 

Var context = canvas. getContext("2d" ) 7 

context. strokeStyle = "#662266"; 

context. lineWidth = 5; 

context. beginPath( ); 

context. ellipse(100,100, 50,75, Math. PI/180 * 45,0,2 * Math. PI); 

context. stroke( ); 


context. beginPath( ); 
context. ellipse(200,100, 50,75, Math. PI/180 * 45, Math. PI, 11/4 * Math. PI); 
context. stroke( ); 


context. beginPath( ) ; 
context. ellipse(300,100, 50,75, Math. PI/180 * 45, 5/4 * Math. PI, 0, true); 
context. closePath( ); 
context. stroke( ); 
</script> 


上 述 代码 中 ,在 画布 的 左 侧 绘 制 了 一 个 完整 的 椭圆 ,并 将 椭圆 旋转 45%; 在 画布 的 中 间 
沿 着 顺 时 针 方 向 绘制 了 一 段 圆 弧 ; 在 画布 的 右 侧 沿 着 逆 时 针 方向 绘制 了 一 段 圆 弧 ,并 使 用 


closePath() 方 法 将 路 径 封闭 ,代码 运行 结果 如 图 4-14 所 示 。 
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图 4-14 绘制 椭圆 


rect() 方 法 用 于 绘制 矩形 的 路 径 , 语 法 格式 如 下 。 
【语法 】 


void ctx. rect(x, y, width, height) 


其 中 : 
。 参数 x、y 表示 矩形 的 起 点 坐标 (x,y) ; 
。 参数 width height 分 别 表示 和 拢 形 的 宽度 和 高 度 。 


下 述 代 码 演示 了 使 用 rect() 方 法 绘制 矩形 路 径 , 然 后 对 路 径 使 用 短线 描 边 ,通过 定时 器 
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实现 边框 逆 时 针 旋 转 的 效果 。 
【案例 4-11】 rect. html 


< canvas id = "myCanvas" width = "260px" height = "200px"></canvas > 
< Script> 
Var canvas = document. getElementById( "myCanvas" ); 
Var context = canvas. getContext("2d"); 回 el Eo 
context. strokeStyle = "#662266"; 案例 视频 讲解 
context. lineWidth = 2; 
var offset = 0; 
context. rect(20,20,200,150); 
context. setLineDash([15,6]); 
function draw(){ 
offset++; 
if(offset >16){ 
offset =0; 





} 

context. clearRect(0,0, canvas. width, canvas. height); 
context. lineDashOffset = offset; 

context. stroke( ); 


} 
setInterval (draw, 20); 
</script> 


上 述 代 码 中 ,使 用 rect() 方 法 创建 了 一 个 矩形 路 径 ; 然后 使 用 setLineDash( ) 方 法 来 设 
置 虚线 边框 ,虚线 的 长 度 为 15 像素 ,虚线 的 间隔 为 6 像素 ; 最 后 使 用 setInterval() 方 法 定时 
更 改 虚线 的 偏 移 量 ( 即 lineDashOffset 属性 ) ,从 而 实现 跑马 灯 效 果 , 如 图 4-15 所 示 。 
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图 4-15 和 矩形 边框 跑马 灯 效 果 


5. arc() 和 arcTo() 方 法 

arc() 方 法 通过 圆 点 和 半径 来 绘制 一 条 圆 弧 路 径 ,绘制 原理 如 图 4-16 所 示 。arc() 方 法 
的 语法 格式 如 下 。 

【语法 】 


void ctx. arc(x, y, radius, startAngle, endAngle, anticlockwise) 
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其 中 : 

。 参数 x、y 表示 圆 弧 所 对 应 圆 的 圆心 坐标 (x,y); 

。 参数 radius 表示 圆 弧 所 对 应 圆 的 半径 ; 

。 参数 startAngle 表示 所 绘制 圆 弧 的 起 始 角 度 ; 

。 参数 endAngle 表示 所 绘制 圆 弧 的 结束 角度 ; 

。 参数 anticlockwise 表示 使 用 逆 时 针 方 向 (true) 还 是 顺 时 针 方 向 (false) 。 
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图 4-16 arc 绘制 圆 弧 


下 述 代码 演示 了 使 用 arc() 方 法 来 绘制 两 个 半圆 的 效果 。 
【案例 4-12】 arc. html 


< canvas id = "myCanvas" width = "210px" height = "100px"></canvas > 
< Script> 
var canvas = document. getElementById( "myCanvas" ) ; 
var context = canvas. getContext("2d"); 
context. strokeStyle = "#662266"; 
context. lineWidth = 2; 
context.arc(60,50,40, Math. PI,2 * Math. PI, true); 
context.arc(140,50,40, Math. PI,2 * Math. PI, false); 
context. stroke( ); 
context. setLineDash([6, 6]); 
context. moveTo( 20, 50); 
context. lineTo( 180, 50); 
context. stroke( ); 
</script> 


上 述 代码 中 ,使 用 arc() 方 法 分 别 沿 顺 时 针 和 逆 时 针 方 向 绘制 了 一 个 半圆 ,然后 绘制 了 
一 条 水 平 虚线 作为 参考 线 , 如 图 4-17 所 示 。 

arcTo() 方 法 通过 切 点 和 半径 来 绘制 一 条 圆 弧 路 径 , 绘 制 原理 如 图 4-18 所 示 。P0 为 圆 
弧 的 起 点 ,P2 为 圆 弧 的 终点 ,POP1 和 了 P1P2 为 圆 弧 的 切线 , 即 Po 和 了 2 为 圆 弧 的 切 点 ,P1 为 
两 条 切线 的 交点 。 
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图 4-17 绘制 圆 弧 图 4-18 arcTo 绘制 圆 弧 











arcTo() 方 法 的 语法 格式 如 下 。 
【语法 】 


void ctx. arcTo(x1, yl, x2, y2, radius) 


其 中 ， 

。 参数 xl .yl 表示 切线 交点 P1 的 坐标 (xl,yl); 

。 参数 x2、y2 为 圆 弧 终点 P2 的 坐标 (x2,y2); 

。 参数 radius 表示 圆 弧 所 对 应 圆 的 半径 。 

下 述 代码 演示 了 使 用 arcTo() 方 法 来 绘制 圆 角 和 矩形 效果 。 
【案例 4-13】 arcTo. html 


< canvas id = "myCanvas" width = "540px" height = "180px"></canvas > 
< Script> 
var canvas = document. getElementById("myCanvas" ); 
Var context = canvas. getContext("2d"); 
context. strokeStyle = "#662266"; 
context. lineWidth = 6; 
function roundedRect(cornerX, cornerY, width, height, cornerRadius){ 
if(width> 0){ 
context. moveTo( cornerX + cornerRadius, cornerY); 
}else{ 
context. moveTo( cornerX - cornerRadius, cornerY); 
| 
context. arcTo( cornerX + width, cornerY, cornerX + width, 
cornerY + height, cornerRadius); 
context. arcTo(cornerX + width, cornerY + height, cornerX, 
cornerY + height, cornerRadius); 
context. arcTo(cornerX, cornerY + height, cornerX, cornerY, cornerRadius); 
if(width> 0){ 
context. arcTo( cornerX, cornerY, cornerX + cornerRadius, 
cornerY, cornerRadius); 
Jelse{ 
context. arcTo( cornerX, cornerY, cornerX — cornerRadius, 
cornerY, cornerRadius); 
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//(cornerx, cornerY) 是 矩形 左上 角 坐 标 
//width 是 矩形 的 宽度 , height 是 矩形 的 高 度 
//cornerRadius 圆 角 的 半径 
function drawRoundedRect( strokeStyle, fillStyle, cornerX, cornerYy, 
width, height, cornerRadius){ 
context. beginPath( ); 
roundedRect (cornerX, cornerY, width, height, cornerRadius); 
context. strokeStyle = strokeStyle; 
context. fillStyle = fillStyle; 
context. stroke( ); 
context. fil1(); 
上 
drawRoundedRect( 'blue', 'coral', 30, 40, 100, 100, 10); 
drawRoundedRect( 'purple', 'gold', 255, 40, — 100, 100, 20); 
drawRoundedRect( 'red', 'white', 280, 140, 100, — 100, 30); 
drawRoundedRect( 'green', 'lightblue', 505, 140, — 100, — 100,40); 
</script > 


上 述 代码 中 , 自 定义 了 一 个 绘制 圆 角 和 矩形 的 roundedRect() 方 法 ,使 用 arcTo() 方 法 分 
别 绘制 矩形 四 个 角 的 圆 弧 。roundedRect() 方 法 根据 参数 width 和 height 的 正 负 从 和 矩形 不 
同 的 顶 角 进行 绘制 。 代 码 运行 结果 如 图 4-19 所 示 。 
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图 4-19 绘制 圆 角 矩形 





6， bezierCurveTo() 和 quadraticCurveTo( ) 方 法 

quadraticCurveTo() 方 法 用 于 绘制 二 次 贝 塞 尔 曲线 路 径 。 在 绘制 路 径 时 ,需要 起 始点 
SCsx,sy) ,控制 点 CP(cpx,cpy) 和 结束 点 ECex,ey) ,如 图 4-20 所 示 。 当 创建 二 次 贝 塞 尔 曲 
线 之 前 ,需要 使 用 moveTo() 方 法 定位 到 起 始点 S。 


控制 点 CP(cpx, cpy) 


起 始点 SGx sy) 结束 点 E(ex, ey) 


i 


图 4-20 quadraticCurveTo() 方 法 绘制 原理 


第 4 章 


quadraticCurveTo() 方 法 的 语法 格式 如 下 。 
【语法 】 


void ctx. quadraticCurveTo(cpx, cpy, ex, ey) 


其 中 ， 
。 参数 cpx、cpy 表示 二 次 贝 塞 尔 曲线 控制 点 CP 的 坐标 (cpx、cpy); 
。 参数 ex、ey 表示 二 次 贝 塞 尔 曲线 结束 点 E 的 坐标 (ex、ey)。 

下 述 代 码 演示 了 使 用 quadraticCurveTo() 方 法 绘制 二 次 贝 塞 尔 曲线 。 
【示例 】 绘制 二 次 贝 塞 尔 曲 线 


var ctx = canvas. getContext ("2d"); 
ctx. moveTo( 20, 20); 

ctx. quadraticCurveTo(20, 100,200, 20); 
ctx, stroke( ); 


下 述 代码 演示 了 使 用 quadraticCurveTo() 方 法 绘制 花 朱 图形 。 
【案例 4-14】 quadraticCurveTo. html 


< h2 > quadraticCurveTo 绘制 花 打 </h2> 
< canvas id = "myCanvas" width = "460px" height = "180px"></canvas > 
< script type = "text/javascript"> 
// 获 取 canvas 元 素 对 应 的 DOM 对 象 
var canvas = document. getElementById("myCanvas" ); 
// 获 取 在 canvas 上 绘图 的 canvasRenderingContent2D 对 象 
var context = canvas. getContext("2d"); 
// 绘 制 五 办 的 花 打 
creatFlower(context,5,70,100, 30,100); 
context. fillStyle = "crimson"; 
context. fill(); 
// 绘 制 六 瓣 的 花 采 
creatFlower(context, 6,220,100,30,80); 
context. fillStyle = "#8B4513"; 
context. fill(); 
// 绘 制 七 汰 的 花 打 
creatFlower(context,7,370,100,25, 80); 
context. fillStyle = "darkgreen"; 
context. fill1(); 


//n: 控制 花瓣 的 数量 , (dx, dy) : 控制 花 朱 的 位 置 
//size: 控制 花 打 的 大 小 , length: 控制 花瓣 的 长 度 
function creatFlower(ctx, n, dx, dy, size, length){ 

// 开 始 创建 路 径 

ctx. beginPath( ); 

ctx. moveTo(dx, dy + size); 

var dig = 2 * Math. PI/n; 

for(var i=1;i<n+1;it+){ 
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// 计 算 控 制 点 的 坐标 
var ctrlX = Math. sin( (i— 0.5) x dig) * length + dx; 
Var ctrlY= Math. cos((i—0.5) * dig) * length+ dy; 
// 计 算 结 束 点 的 坐标 
Var x= Math. sin(ix dig) * size + dx; 
var y= Math. cos(ix* dig) * size + dy; 
// 绘 制 二 次 曲线 
ctx. quadraticCurveTo(ctrlX, ctrlY, x, y); 
} 
ctx. closePath( ); 


</script> 


上 述 代码 中 ,通过 creatFlower() 方 法 来 创建 花 末 的 路 径 , 其 中 ,参数 n 表示 花 泊 的 数 
晤 ,参数 dx 和 dy 用 于 控制 花 朱 的 位 置 ,参数 size 用 于 控制 花 人 打 的 大 小 ,参数 length 用 于 控 
制 花 辩 的 长 度 。 在 creatFlower() 方 法 中 ,首先 计算 花瓣 的 开始 位 置 、 控 制 点 位 置 和 结束 位 
置 ,然后 使 用 quadraticCurveTo0) 方 法 绘制 花瓣 的 路 径 , 并 对 花瓣 进行 颜色 填充 。 代 码 运行 
结果 如 图 4-21 所 示 。 








口 quadraticCurveTot@ MM x 
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quadraticCurveTo 绘 制 花 采 


闯关 次 


图 4-21 quadraticCurveTo() 方 法 绘制 花 打 





bezierCurveTo() 方 法 用 于 绘制 三 次 贝 塞 尔 曲 线路 径 。 在 绘制 路 径 时 ,需要 起 始点 
S(sx,sy) ,结束 点 E(ex,ey) 以 及 两 个 控制 点 CP1 (cplx, cply) 和 CP2 (cp2x, cp2y), 如 
图 4-22 所 示 。 在 创建 三 次 贝 塞 尔 曲线 之 前 ,需要 使 用 moveTo() 方 法 定位 到 起 始点 S。 


控制 点 CPI(cp1x, cply) 控制 点 CP2(cp2x, cp2y) 


结束 点 E(ex, ey) 


起 始点 S(sx, sy) 


图 4-22 bezierCurveTo() 方 法 绘图 原理 
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bezierCurveTo() 方 法 的 语法 格式 如 下 。 
【语法 】 


void ctx. bezierCurveTo(cplx, cply, cp2x, cp2y, ex, ey) 


其 中 : 

。 参数 cplx、cply 表示 三 次 贝 塞 尔 曲线 的 第 一 个 控制 点 cpl 的 坐标 (cplx,cply); 
。 参数 cp2x、cp2y 表示 三 次 贝 塞 尔 曲线 的 第 二 个 控制 点 cp2 的 坐标 (cp2x,cp2y); 
。 参数 ex.ey 表示 三 次 贝 塞 尔 曲线 结束 点 玉 的 坐标 Cex,ey) 。 

下 述 代码 演示 了 使 用 bezierCurveTo () 方 法 绘制 三 次 贝 塞 尔 曲线 。 

【示例 】 绘制 三 次 贝 塞 尔 曲 线 


var ctx = canvas. getContext("2d"); 

ctx. moveTo(50,20);  ”// 定 位 到 三 次 贝 塞 尔 曲 线 的 起 始点 
ctx, bezierCurveTo(230, 30,150, 60, 50,100); 

ctx, stroke( ); 


下 述 代 码 演 示 了 使 用 bezierCurveTo() 方 法 创建 一 个 波浪 效果 。 
【案例 4-15】 bezierCurveTo. html 


< canvas id = "myCanvas" width = "400px" height = "260px"></canvas > 
< Script> 
Var canvas = document. getElementById( 'myCanvas ') ; 
Var context = canvas. getContext( '2d'); 
// 初 始 角度 为 0 
var step=0; 
// 定 义 三 条 不 同 波浪 的 颜色 
var lines = ["rgba(0,222,255,0.2)", "rgba(157,192,249,0.2)", 
"rgba(0,168,255,0.2)"]; 
function loop(){ 
context. clearRect(0, 0, canvas. width, canvas. height); 
step++; 
// 画 3 个 不 同 颜色 的 矩形 
for(var i= lines.length—-1;i>=0;i--){ 
context. fillStyle= lines[i]; 
// 每 个 矩形 的 角度 都 不 同 ,每 个 之 间 相差 45 度 
var angle= (step + ix45) * Math. PI/180; 
var deltaHeight = Math. sin(angle) * 50; 
var deltaHeightRight = Math. cos(angle) * 50; 
context. beginPath( ); 
// 在 左边 线 上 确定 起 始点 
context. moveTo( 0, canvas. height/2 + deltaHeight); 
// 创 建 从 左边 线 到 右边 线 的 曲线 路 径 ( 即 波浪 线 ) 
context. bezierCurveTo( canvas. width/2, 
canvas. height/2 + deltaHeight - 50, canvas. width/2, 
canvas. height/2 + deltaHeightRight - 50, canvas. width, 
canvas. height/2 + deltaHeightRight); 
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// 添 加 右边 线 、 下 边线 以 及 左边 线 的 路 径 
context. lineTo( canvas. width, canvas. height); 
context. lineTo( 0, canvas. height); 
context. lineTo( 0, canvas. height/2 + deltaHeight); 
context. closePath( ); 
context. fil1(); 
// 为 了 方便 理解 ,此 处 增加 波浪 的 外 形 边线 
‘context. strokeStyle = " #8B4513"; 
Context. stroke( ); 
} 
requestAnimationFrame( loop); 
} 
loop(); 
</script > 


上 述 代码 中 先后 绘制 了 三 种 颜色 的 波浪 。 在 绘制 每 条 波浪 时 都 需要 通过 以 下 步骤 来 实 
现 : 首先 在 画布 的 左边 线 上 确定 起 始点 ,在 画布 的 右边 线 上 确定 结束 点 ,通过 Math 对 象 的 
sin() 和 cos() 方 法 来 计算 出 贝 塞 尔 曲线 的 两 个 控制 点 ,使 用 bezierCurveTo( ) 方 法 绘制 顶部 
的 波浪 线 ; 接 下 来 ,将 所 绘制 的 贝 塞 尔 曲线 与 右边 线 、 下 边线 和 左边 线 进行 连接 形成 封闭 区 
域 ,并 使 用 fill() 方 法 填充 海浪 区 域 。 

最 后 使 用 requestAnimationFrame() 方 法 循环 调用 loop() 方 法 从 而 形成 波浪 的 动态 效 
果 , 如 图 4-23 所 示 。 
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7. isPointInPath() 和 isPointlnStroke() 方 法 

isPointInStroke() 方 法 用 于 检测 某 点 是 否 在 路 径 的 描 边线 上 ,该 方法 返回 一 个 布尔 值 。 当 
isPointInStroke() 方 法 的 返回 值 为 true 时 ,表示 监测 点 在 路 径 的 描 边线 上 ; 当 返 回 值 为 false 
时 ,表示 监测 点 不 在 路 径 的 描 边 线 上 。 下 述 代码 演示 了 isPointInStroke() 方 法 的 使 用 。 

【案例 4-16】 isPointInStroke. html 


< canvas id = "myCanvas" width = "400" height = "200"></canvas > 
< Script> 
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var canvas = document. getElementById( "myCanvas" ); 
Var context = canvas. getContext("2d"); 
var lineWidth = 10; 
var strokeStyle = "lightblue"; 
function drawRect( ){ 
context. clearRect(0, 0, canvas. width, canvas. height); 
context. fillStyle = "yellowgreen"; 
context. rect(20, 20,100, 100); 
context. fil1(); 
context. strokeStyle = strokeStyle; 
context. lineWidth = lineWidth; 
context. stroke( ); 
drawRect( ); 
canvas. onmousemove = function(ev){ 
var e= ev| |event; 
if(context. isPointInStroke(e. clientX, e. clientY)){ 
strokeStyle = "rgb(" + Math. floor(Math. random() * 255) + "," 
+ Math. floor(Math. random( ) * 255) + "," 
+ Math. floor(Math. random( ) * 255) + ")"; 
console. log( strokeStyle); 
Jelse{ 
strokeStyle = "lightblue"; 
} 
drawRect( ); 
} 


</script > 


上 述 代码 中 ,在 画布 上 绘制 了 一 个 矩形 路 径 , 使 用 yellowgreen 颜色 进行 填充 ,使 用 
lightblue 颜色 进行 描 边 。 当 鼠标 在 矩形 边线 上 移动 时 ,边线 的 颜色 随机 改变 ; 当 鼠 标 离开 
描 边线 时 ,边线 恢复 为 lightblue 颜色 。 代 码 运行 结果 如 图 4-24 所 示 ,读者 可 以 自行 测试 。 











图 4-24 isPointInStroke() 方 法 进行 检查 


isPointInPath() 方 法 用 于 判断 在 当前 路 径 中 是 否 包含 检 测 点 , 当 检 测 点 位 于 当前 路 径 
或 指定 的 路 径 中 时 方法 返回 true, 否 则 返回 false。 下 述 代 码 演示 了 使 用 isPointInPath() 方 
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法 来 检测 圆 球 与 矩形 区 域 的 位 置 关 系 。 
【案例 4-17】 isPointInPath. html 


< canvas id = "myCanvas" width = "400" height = "200"></canvas > 
< Script> 





Var canvas = document. getElementById("myCanvas" ); 
Var ctx = canvas. getContext("2d"); hh 
var x=50,y=50;  ”// 圆 球 的 初始 位 置 案例 视频 讲解 
var ball = new Ball(); 
var rectangle = new Rectangle( ); 
// 重 绘 场景 
resetCanvas() 
// 绘 制 小 球 
createBall (ball); 
// 当 鼠标 按 下 时 ,将 鼠标 按 下 坐标 保存 在 球 的 (x, y) 坐 标 中 
Canvas. onmousedown = function(ev){ 
var e= ev| |event; 
ball.x= e.clientX; 
ball.y= e.clientYy; 
drag(ball); 
}; 


// 拖 动 小 球 
function drag(ball){ 
// 当 按 下 鼠标 时 ,判断 鼠标 是 否 在 圆 球 上 
if(ctx. isPointInPath(ball. x, ball.y)){ 
// 当 鼠标 在 球 上 时 ,为 Canvas 添加 onmousemove 事件 ,并 拖 动 球体 
canvas. onmousemove = function(ev){ 
var e= ev| |event; 
ball.x=e.clientX; 
ball.y= e.clientYy; 
// 鼠 标 每 移动 一 帧 都 重 绘 场景 ,并 在 新 的 位 置 绘制 球体 
resetCanvas( ); 
createBall(ball); 
}; 
// 当 鼠标 按钮 弹 起 时 
canvas. onmouseup = function( ){ 
canvas. onmousemove = null; 
canvas. onmouseup = null; 
resetCanvas( ); 
if(ball.x+ ball. radius> rectangle.x 
&&ball.y+ ball. radius > rectangle. y){ 
ball.x= rectangle.x+ ball. radius + 10; 
ball.y= rectangle.y+ ball. radius + 10; 
} 
createBall(ball); 
}; 
}; 
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// 球 体 

function Ball(){ 
this.x= x; 
this.y=y; // 球 的 圆心 了 坐标 
this. radius = 30; 
this. fillColor = " #FFD700"; 
this. lineWidth= 4; 
this. strokeCololr = " # B23AEE"; 





! 
// 和 矩形 区 域 
function Rectangle( ){ 
this. width = 90; 
this. height = 90; 
this. x = 300; 
this.y= 100; 
this. color = " # A3A3A3"; 
} 
// 创 建 球体 
function createBall(ball){ 
ctx. beginPath( ); 
ctx. fillStyle = ball. fillColor; 
ctx.arc(ball. x, ball. y, ball. radius, 0, Math. PI * 2); 
ctx. £i11(); 
ctx. strokeStyle = ball. strokeCololr; 
ctx. lineWidth = ball. lineWidth; 
ctx. stroke( ); 
} 
// 创 建 矩 形 区 域 
function createRectangle(rectangle){ 
ctx. fillStyle = rectangle. color; 
ctx. fillRect(rectangle. x, rectangle. y, rectangle. width, 
rectangle. height); 
} 
// 初 始 化 场景 
function resetCanvas(){ 
ctx. clearRect (0, 0, canvas. width, canvas. height); 
createRectangle( rectangle); 
} 


</script> 


上 述 代码 中 绘制 了 一 个 圆 球 和 和 矩 形 区 域 ; 当 鼠 标 按 下 时 ,使 用 isPointInPath() 方 法 判 
断 鼠 标 是 否 在 圆 球 范围 之 内 , 当 鼠 标 在 圆 球 范围 之 内 按 下 时 允许 拖 动 圆 球 ,否则 圆 球 不 能 拖 
动 。 在 圆 球 拖 动 过 程 中 ,可 以 将 圆 球 放 置 在 矩形 区 域 之 外 的 任意 位 置 。 当 圆 球 与 矩形 区 域 
存在 部 分 重 和 至 时 释放 鼠标 , 圆 球 会 自动 滑 和 人 和 矩形 区 域 。 代 码 运行 结果 如 图 4-25 所 示 ,读者 
可 自行 测试 。 

8. save() 和 restore() 方 法 

save() 方 法 用 于 将 Canvas 画布 的 当前 状态 保存 到 状态 栈 中 ,所 保存 的 状态 包括 变换 矩 
阵 、 剪 切 区 域 、. 虚 线 列 表 等 信息 以 及 strokeStyle fillStyle .globalAlpha lineWidth lineCap、 
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4-25 isPointInPath 路 径 判断 


lineJoin miterLimit, lineDashOffset、shadowOffsetX 、shadowOffsetY 、shadowBlur shadowColor、 
globalCompositeOperation ,font textAlign ,textBaseline direction 和 imageSmoothingEnabled 等 
属性 的 状态 值 。 

restore( ) 方 法 用 于 从 状态 栈 的 最 顶端 弹出 最 近 保 存 的 状态 ,使 得 Canvas 恢复 至 最 近 的 
保存 状态 。 如 果 没 有 保存 过 状态 , 则 restore() 方 法 不 做 任何 改变 。 下 述 代 码 使 用 save() 和 
restore() 实 现 一 个 对 称 色 调 的 柱 形 图 。 

【案例 4-18】 save& restore. html 


< canvas id = "myCanvas" width = "440px" height = "220px"></canvas > 
< Script> 
Var canvas = document. getElementBYId("myCanvas" ) ; 
Var context = canvas. getContext("2d"); 
var data = [80,60,90,40,100, 80,120,150,60,20]; 
Var fillStyles = ["#FFB9OF", "#FF69B4", "#8470FF"," 间 98FB98"," #848484"]; 
var width= 20; 
var margin = 20; 
var start = 20; 
var base = 200; 


context. strokeStyle = "#662266"; 
context. lineWidth = 2; 
for(var i in data){ 
if(i< data. length/2){ 
context. fillStyle= fillStyles[i]; 
context. save( ); 
Jelse{f 
context. restore( ); 
J 
context. beginPath( ); 
context. rect(start + ix (width+ margin), base, width, - data[ i]); 
context. fill1(); 
context. stroke( ); 
context. fillText(data[ i], start + ix (width+ margin), base — data[i] -10) 
context. closePath( ); 
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context. moveTo( start — 10, base + 3); 
context. lineTo( start + (width + margin) * data. length, base + 3); 
context. stroke( ); 

</script> 


上 述 代 码 绘 制 了 一 个 柱 形 图 ,在 绘制 前 面 5 个 柱 形 时 ,每 次 都 使 用 save() 方 法 保存 当前 
状态 ; 在 绘制 后 面 5 个 柱 形 时 ,每 次 在 绘制 之 前 使 用 restore() 方 法 从 状态 栈 中 弹出 一 个 状 
态 来 恢复 Canvas 状态 。 在 所 绘制 的 柱 形 图 中 ,对 称 的 柱 形 颜色 相同 。 代 码 运行 结果 如 
图 4-26 所 示 。 








图 4-26 柱 形 图 ( 见 彩 插 ) 


9. clip() 方 法 

clip() 方 法 用 于 将 当前 路 径 设置 为 剪 切 区 域 ,只 有 在 裁剪 区 域内 的 图 形 才能 显示 ,其 余 
部 分 是 不 可 见 的 。 下 述 代码 演示 了 使 用 clip() 方 法 实现 遮 章 效果 。 

【案例 4-19】 clip. html 


< canvas id = "myCanvas" width = "300px" height = "220px"></canvas > 
< Script> 

var canvas = document. getElementById("myCanvas" ); 

Var context = canvas. getContext("2d"); 

drawScreen( ); 


function drawScreen( ){ 
var x= canvas. width/2; 
var y= canvas. height/2; 
var radius = 75; 
var offset = 120; 


// 裁 前 的 区 域 为 以 (x, y) 为 中 心 的 半径 为 75 的 圆 
context. save( ); 

context. beginPath( ); 

context. arc(x, yy, radius, 0,2 * Math. PI, false); 
context. clip(); 


// 先 画 一 个 蓝 色 的 圆 弧 ， 超 过 裁剪 的 部 分 不 显示 
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context. beginPath( ); 

context. arc(x- offset * 4/6,y— offset * 2/6, radius, 0,2 * Math. PI, false); 
context. fillStyle = '# BACDCD'; 

context. fill1(); 


// 画 一 个 黄色 的 圆 弧 ， 超 过 裁剪 的 部 分 不 显示 

context. beginPath( ); 

context. arc(x+ offset * 2/3,y— offset/3, radius, 0,2 * Math. PI, false); 
context. fillStyle = '#EE9A00'; 

context. fill(); 

// 画 一 个 红色 的 圆 弧 ， 超 过 裁剪 的 部 分 不 显示 

context. beginPath( ); 

context. arc(x, y+ offset * 7/9, radius, 0,2 * Math. PI, false); 
context. fillStyle = 'red'; 

context. fill(); 

context. restore( ); 


context. beginPath( ); 
context,. arc(x, y, radius, 0,2 * Math. PI, false); 
context, lineWidth= 3; 
context. strokeStyle = '# 698B22'; 
context. stroke( ); 
} 


</script> 


上 述 代 码 中 , 先 创建 了 一 个 圆 形 作为 遮 罩 区 域 , 然 后 分 别 绘制 蓝 色 黄色 和 红色 三 个 圆 形 ， 
三 个 圆 在 遮 单 区 域 的 部 分 是 可 见 的 ,其 他 部 分 是 不 可 见 的 。 代 码 运 行 结果 如 图 4-27 所 示 。 
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图 4-27 遮 音 效果 ( 见 彩 插 ) 


4.5 绘制 图 像 


HTML 5 Canvas 提供 了 绘制 图 像 的 功能 。 在 绘制 图 像 时 ,不 仅 能 够 对 图 像 进行 缩放 和 
裁剪 ,还 能 对 图 像 进行 像素 级 处 理 , 如 红色 通道 .绿色 通道 . 蓝 色 通道 .透明 度 以 及 水 印 等 
效果 。 
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4.5.1 图 像 加 载 


在 CanvasRenderingContext2D 对 象 中 提供 了 drawImage() 方 法 ,用 于 将 图 像 绘 制 到 画 
布 中 ,语法 格式 如 下 。 
【语法 】 


void ctx. drawImage( image dx, dy) 

void ctx. drawImage( image, dx, dy, destWidth, destWidth) 

void ctx. drawImage( image, sx, sy, sourceWidth, sourceHeight, 
dx, dy, destWidth, destHeight) 


其 中 ， 

。 参数 image 表示 所 要 绘制 的 图 像 源 (CanvasImageSource) ,如 HTMLImageElement、 
HTMLVideoElement 和 HTMLCanvasElement 等 ; 

。 参数 dx ,dy 表示 所 绘制 图 像 的 左上 角 在 画布 中 的 坐标 位 置 (dx,dy) ,如 图 4-28 所 示 ; 

。 参数 destWidth .destHeight 分 别 表示 所 绘制 的 图 像 在 画布 中 的 宽度 与 高 度 , 通 过 调 

整 destWidth 和 destHeigh 属性 来 实现 图 像 的 缩放 效果 ; 

参数 sx、sy 表示 对 图 像 源 从 坐标 点 (sx,sy) 开 始 裁 前 图 像 ; 

。 参数 sourceWidth、sourceHeight 分 别 表示 对 图 像 源 裁剪 的 宽度 和 高 度 。 
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图 4-28 图 像 绘制 原理 


使 用 drawImage() 方 法 绘制 图 像 时 ,经 常 因为 网 络 上 的 图 像 比 较 大 而 导致 图 像 不 能 立 
即 显示 ,用 户 需 要 耐心 等 待 直到 网 页 中 的 所 有 图 像 全 部 加 载 完毕 后 才能 显示 出 来 。 

通过 Image 对 象 的 onload 事件 可 以 有 效 地 解决 上 述 问题 , 当 一 幅 图 像 加 载 完 成 时 会 立 
即 触发 onload 事件 ,在 onload 事件 中 完成 图 像 的 显示 。 

【示例 】 图 像 的 onload 事件 

image. onload = function(){ 


// 绘 制图 像 .… 
}; 
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下 述 代码 演示 了 使 用 图 像 的 onload 事件 实现 图 像 的 正常 显示 、 缩 小 和 裁剪 等 效果 ,并 
对 图 像 的 裁剪 区 域 进行 放大 和 缩小 。 
【案例 4-20】 drawImage. html 


< canvas id = "myCanvas" width= "570" height = "220" ></canvas > 
< Script> 

Var width= 100; 

var height = 130; 

Var canvas = document. getElementById( "myCanvas" ); 

Var context = canvas. getContext("2d"); 

Var img = new Image(); 

context, fillStyle = "#8B4513"; 

context. font = "20px 楷体 "; 

img. src = "images/girl- little. jpg"; 

// 绘 制 一 幅 图 像 

img. onload = function(){ 
context. drawImage( img, 10,10); 
context. fillText(" 原 图 ", 50,205); 
// 图 像 整 体 缩小 
context. drawImage( img, 140,10, 80, 120); 
context. fillText ("整体 缩小 ",140,160); 
// 从 原 图 中 进行 裁剪 ,等 比例 绘制 
context. drawImage( img, 10, 10, width, height, 230, 10, width, height ); 
context. fillText(" 等 比例 裁剪 ", 230, 170); 
// 从 原 图 中 进行 裁剪 ,1.3 倍 放大 
context. drawImage( img, 10, 10, width, height, 340, 10, width * 1.3, height x 1.3); 
context. fillText ("裁剪 放 大 ", 363,200); 
// 从 原 图 中 进行 裁剪 ,0.8 倍 缩小 
context. drawImage( img, 10, 10, width, height, 480, 10, width * 0.8, height * 0.8); 
context. fillText ("裁剪 缩小 ", 480, 140); 

}; 


</script > 


上 述 代 码 运 行 结果 如 图 4-29 所 示 。 当 图 像 加 载 完毕 时 ,立即 触发 onload 事件 。 在 
onload 事件 中 依次 完成 图 像 的 原样 显示 、 整 体 缩小 、 等 比例 裁剪 等 效果 ,并 对 裁剪 区 域 部 分 
进行 放大 和 缩小 。 
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图 4-29 图 像 的 绘制 
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4.5.2 像素 处 理 


图 像 是 由 像素 构成 的 ,而 每 个 像素 则 由 红 (R)、 绿 (G)、 蓝 (B) 和 透明 度 (A) 四 部 分 构成 ， 
通过 对 像素 的 RGBA 进行 处 理 , 可 实现 图 像 的 颜色 变换 、 透 明度 的 调整 等 效果 。 


CanvasRenderingContext2D 对 象 提供 了 三 个 像素 处 理 的 方法 ,分 别 是 createImageData()、 
putImageData() 和 getImageData() 方 法 。 


1. createlmageData() 方 法 
createImageData() 方 法 用 于 创建 一 个 新 的 、 空 白 的 、 指 定 大 小 的 ImageData 对 象 ,该 对 


象 中 所 有 的 像素 都 是 透明 的 。createImageData() 方 法 的 语法 格式 如 下 。 
【语法 】 


ImageData ctx. createImageData(width, height); 
ImageData ctx. createImageData( imagedata); 


其 中 : 

。 参数 width 表示 ImageData 对 象 的 宽度 ; 

。 参数 height 表示 ImageData 对 象 的 高 度 ; 

。 参数 imagedata 是 一 个 ImageData 类 型 的 对 象 , 表 示 从 imagedata 对 象 中 复制 一 个 
与 其 宽度 和 高 度 相 同 的 对 象 ,而 图 像 中 的 数据 没有 被 复制 。 

ImageData 接口 用 于 描述 Canvas 元 素 中 一 个 隐 含 像素 数据 的 区 域 。 当 使 用 


CanvasPixelArray 来 创建 ImageData 对 象 时 ,所 创建 的 对 象 中 包含 图 像 的 宽度 (width) 高 
度 Cheight) 和 数据 (data) 三 部 分 ,具体 见 表 4-7。 


表 4-7 ImageData 对 象 的 属性 


属性 描 述 

width | 使 用 像素 描述 ImageData 的 实际 宽度 

height | 使 用 像素 描述 ImageData 的 实际 高 度 

CanvasPixelArray 类 型 一 维 数组 ,其 中 包含 RGBA 顺序 的 数据 ,数据 使 用 0 一 255 的 整数 表示 。 
数据 的 格式 如 rl,gl,bl,al,r2,g2,b2,a2,…, 其 中 rl,gl,bl'al 分 别 代表 第 一 个 像素 的 红色 
值 .绿色 值 . 蓝 色 值 .透明 度 ,其 他 数据 依次 类 推 ,像素 的 实际 个 数 为 data. length/4 











data 





2. putlmageData() 方 法 


putImageData() 方 法 用 于 将 ImageData 对 象 中 的 data 数据 ( 即 像素 集合 ) 绘 制 到 画布 
中 ,putImageData() 方 法 的 语法 格式 如 下 。 

【语法 】 

void ctx. putImageData( imagedata, dx, dy); 


void ctx. putImageData( imagedata, dx, dy, dirtyX, dirtyY, 
dirtyWidth, dirtyHeight); 


其 中 : 
。 参数 imagedata 是 一 个 包含 像素 集合 的 数据 对 象 ; 
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参数 dx 表示 原 图 像 数据 在 目标 画布 中 沿 x 轴 方 向 的 位 置 偏 移 量 ; 

参数 dy 表示 原 图 像 数 据 在 目标 画布 中 沿 y 轴 方 向 的 位 置 偏 移 量 ; 

参数 dirtyX 表示 在 原 图 像 数 据 中 矩形 区 域 左 上 角 的 位 置 ,默认 是 整个 图 像 数据 的 
左上 角 的 x 坐 标 ; 

参数 dirtyY 表示 在 原 图 像 数 据 中 和 矩形 区 域 左 上 角 的 位 置 ,默认 是 整个 图 像 数 据 的 
左上 角 的 y 坐标 ; 

参数 dirtyWidth 表示 在 原 图 像 数据 中 矩形 区 域 的 宽度 ,默认 是 图 像 数 据 的 宽度 ; 
参数 dirtyHeight 表示 在 原 图 像 数 据 中 矩形 区 域 的 高 度 , 默 认 是 图 像 数 据 的 高 度 。 


下 述 代 码 使 用 createImageData() 方 法 创建 了 一 个 ImageData 对 象 ,并 随机 为 每 一 个 像 
素 生 成 数据 ,最 后 通过 putImageData( ) 方 法 绘制 到 画布 中 。 
【案例 4-21】 createImageData. html 


< canvas id = "myCanvas" width = "240px" height = "120px"></canvas > 
< Script> 


var canvas = document. getElementById("myCanvas" ); 
var context = canvas. getContext("2d"); 
// 新 创建 一 个 空白 的 imageData 对 象 
Var imageData = context. createImageData(100,100); 
for(var i= 0;i< imageData. data. length;i++){ 
imageData. data[ i] = Math. floor(Math. random( ) * 255); 
由 
var imageData2 = context. createImageData( imageData) ) 
// 绘 制 边框 
context. strokeStyle = " # 33001B"; 
context. lineWidth = 2; 
context. strokeRect(6,6, imageData. width + 4, imageData. height + 4); 
context. strokeRect( imageData. width + 20,6, imageData2. width+ 4, 
imageData2. height + 4); 
// 将 imageData 数据 绘制 到 画布 中 
context. PutImageData( imageData, 8,8); 
context. put ImageData( imageData2, 122,8); 


</script > 


上 述 代码 中 ,使 用 createImageData(100,100) 方 法 创建 了 一 个 宽度 和 高 度 均 为 100 像 
素 的 矩阵 集合 ,并 随机 为 每 个 像素 生成 数据 。 使 用 context. createImageData(imageData) 方 
法 创建 imageData2 对 象 ,该 对 象 的 宽度 和 高 度 与 imageData 对 象 相同 ,但 是 在 创建 
imageData2 对 象 的 过 程 中 并 没有 将 imageData 对 象 中 的 数据 复制 到 imageData2 对 象 中 。 
使 用 putImageData() 方 法 将 imageData imageData2 对 象 中 的 像素 集合 分 别 绘制 到 画布 中 。 
代码 运行 结果 如 图 4-30 所 示 。 

3. getlmageData() 方 法 

getImageData() 方 法 用 于 从 画布 中 获取 一 个 图 像 的 像素 集合 ,返回 一 个 ImageData 类 
型 的 数据 对 象 。getImageData() 方 法 的 语法 格式 如 下 。 
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4-30 createImageData() 方 法 的 使 用 
【语法 】 
ImageData ctx. getImageData( sx, sy, sw, sh) ; 


其 中 : 

。 参数 sx、sy 表示 被 提取 的 图 像 数 据 窍 形 区 域 的 左上 角 坐 标 (sx,sy); 

。 参数 sw sh 表示 被 提取 的 图 像 数 据 矩 形 区 域 的 宽度 和 高 度 ; 

。 getImageData() 方 法 返回 一 个 ImageData 类 型 的 数据 对 象 。 

下 述 代 码 演示 了 使 用 getImageData() 和 putImageData( ) 方 法 来 实现 图 像 的 颜色 通道 
和 透明 度 的 处 理 。 

【案例 4-22】 pixelProcess. html 


< canvas id = "myCanvas" width = "702" height = "150" ></canvas > < br/> 

< input type = "button" value = " 原 图 " onClick = "showNormalImage()"/>< br /> 

< input type = "button" value = "红色 通道 " onClick = "showChannel('red',100)"/> 
< input type= "range" id = "redRange" min = "0" max= "100" step="1" value=" 
100" 





oninput = "showChannel( 'red', this. value)"/><br /> 
< input type = "button" value = "绿色 通道 " onClick = "showChannel( 'green', 100)"/> 
< input type = "range" id = "greenRange" min= "0" max= "100" step= "1" value= "100" 
oninput = "showChannel( 'green', this. value)"/><br /> 
< input type = "button" value = " 蓝 色 通道 " onClick = "showChannel( 'blue', 100)"/> 
< input type = "range" id = "blueRange" min= "0" max= "100" step= "1" value= "100" 
oninput = "showChannel( 'blue', this. value)"/><br /> 
< input type = "button" value = " 半 透 明 " onClick = "showChannel( 'transparent', 50)"/> 
< input type = "range" id= "transparentRange" min= "0" max= "100" step= "1" value= "50" 
oninput = "showChannel( 'transparent', this. value)"/><br /> 
< input type = "button" value = " 反 相 显示 ”onClick = "showChannel( 'reverse')"/><br /> 
< input type = "button" value = "水 印 效 果 " onClick = "showChannel( 'watermark')"/><br /> 
< input type= "button" value= "清空 画布 "onClick = "clearCanvas()"/> 
< Script> 
function showNormalImage(){ 
var canvas = document. getElementById( "myCanvas" ) ; 
var context = canvas. getContext("2d" ) ; 
context. clearRect(0,0,100,150); 
Var img = new Image(); 
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img. src = "images/Claire— little. jpg"; 
img. onload = function(){ 
context. drawImage( img, 0,0); 
}; 
function showChannel (channel, percentage){ 
Var canvas = document. getElementById( "myCanvas" ); 
Var context = canvas. getContext("2d"); 
var x=0,y= 0; 
Var img = new Image(); 
img. src = "images/Claire— little. jpg"; 
var quantity = 255; 
if(percentage!= ""){ 
quantity = percentage * 255/100; 
3 
img. onload = function( ){ 
context. drawImage( img, 0, 0); 
var imageData = context. getImageData(0,0, img. widthv img. height); 
var num = imageData. data. length; 
for(var i=0;i<num;i=i+4){ 
if(channel == 'red'){ 
imageData. data[ i + 0] = quantity; 
x=100; 
}else if(channel == 'green'){ 
imageData. data[ i + 1] = quantity; 
x= 200; 
}else if(channel == 'blue'){ 
imageData. data[ i + 2] = quantity; 
x= 300; 
}else if(channel == 'transparent'){ 
imageData. data[ i + 3] = quantity; 
x= 400; 
}else if(channel == 'reverse'){ 
imageData. data[i+0] = 255 ~ imageData. data[ i + 0]; 
imageData. data[ i+ 1] = 255 ~ imageData. data[i + 1]; 
imageData. data[ i + 2] = 255 — imageData. data[ i + 2]; 
x= 500; 


} 
context. putImageData( imageData, x, y); 
if(channel == 'watermark'){ 
context. putImageDatal( imageData, 600, y); 
context. fillStyle = "#33001B"; 
context. font = "45px Giddyup Std"; 
context. textBaseline = "top"; 
context. fillText("Claire", 610,y+ 90) 


}; 
} 
function clearCanvas(){ 
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var canvas = document. getElementById( "myCanvas" ); 
Var context = canvas. getContext("2d"); 
context. clearRect(0, 0, canvas. width, canvas. height); 
} 
</script > 


上 述 代 码 中 ,首先 使 用 drawImage() 方 法 将 Claire-little 图 像 原样 绘制 到 画布 中 ; 然后 
使 用 getImageData() 方 法 从 画布 的 (0,0) 点 开始 ,获取 一 个 img. widthXimg. height 的 像素 
集合 ; 通过 像素 的 RGBA 原理 对 像素 进行 处 理 。 例 如 , 当 单 击 “ 红 色 通 道 ” 时 ,将 图 像 的 每 
一 个 像素 的 red 数据 部 分 进行 处 理 ,并 将 处 理 完 的 数据 使 用 putImageData() 方 法 绘制 到 面 
布 中 。 


代码 运行 结果 如 图 4-31 所 示 , 单 击 “红色 通道 ”按钮 ,显示 图 像 的 红色 通道 相应 的 效果 ， 
拖 动 “红色 通道 ” 右 侧 的 滑动 条 ,通过 修改 “红色 通道 ”所 占 的 比重 ,调整 图 像 的 显示 效果 。 除 
此 之 外 ,还 有 绿色 通道 、 蓝 色 通 道 , 半 透明 、 反 相 显 示 、 水 印 效果 ,读者 可 自行 测试 。 
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图 4-31 图 像 的 像素 处 理 ( 见 彩 插 ) 


4.5.3 图 像 平 铺 


图 像 平 铺 是 一 种 比较 重要 的 技术 ,用 于 将 图 像 按照 一 定 比 例 缩放 后 对 画布 进行 平 铺 。 
createPattern() 方 法 用 于 创建 一 种 平 铺 模式 ,返回 一 个 canvasPattern 对 象 ; 在 绘制 图 形 之 
前 ,通过 将 fillStyle( 或 strokeStyle) 属 性 设 为 canvasPattern 模式 ,可 实现 图 像 的 平 铺 效 果 。 

【语法 】 


Var canvasPattern = CreatePattern( image, repetitionStyle); 


其 中 : 

。 参数 image 表示 所 要 平 铺 的 图 像 或 Canvas 元 素 ; 

。 参数 repetitionStyle 用 于 设 定 平 铺 的 方式 . 平 铺 方式 包括 双向 平 铺 (repeat)、x 方 向 
平 铺 (repeat-x) ,y 方向 平 铺 (repeat-y) 和 不 平 铺 (no-repeat) 。 


© 
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下 述 代码 演示 了 使 用 createPattern() 方 法 实现 图 像 背 景 平 铺 和 图 像 边框 效果 。 
【案例 4-23】 createPattern. html 


<canvas id= "fillCanvas" width= "200" height = "200" ></canvas> 
< canvas id = "borderCanvas" width = "200" height = "200" ></canvas> 
< canvas id = "scaleCanvas" width = "210" height = "210" ></canvas > 
< Script> 
fillImageContext(); 
drawImageBorder( ); 
scaleCanvas(); 
function fillImageContext(){ 
var canvas = document. getElementById("fillCanvas"); 
Var context = canvas. getContext("2d"); 
var img = new Image(); 





img. src = "images/broadcast - little. jpg"; 
img. onload = function(){ 
var pattern = context. createPattern( img," repeat" ); 
context. fillStyle = pattern; 
context. fillRect(0,0, canvas. width, canvas. height) ; 
}; 
} 
function drawImageBorder(){ 
var canvas = document. getElementById( "borderCanvas" ); 
Var context = canvas. getContext("2d"); 
var lineWidth = 80; 
context. lineWidth = lineWidth; 
Var img = new Image(); 
img. src = "images/broadcast - little. jpg"; 
img. onload = function( ){ 
var pattern = context. createPattern(img," repeat" ); 
context. strokeStyle = pattern; 
context. strokeRect(0,0, canvas. width, canvas. height); 
}; 
9 
function scaleCanvas(){ 
var lineWidth = 60; 
var canvas = document. getElementById( "scaleCanvas"); 
Var context = canvas. getContext("2d"); 
Var tempCanvas = document. createElement("canvas"); 
tempCanvas. width = 30; 
tempCanvas. height = 30; 
var tempContext = tempCanvas. getContext("2d"); 
var img = new Image(); 
img. src = "images/broadcast — little. jpg"; 
img. onload = function(){ 
tempContext. drawImage( img, 0, 0, tempCanvas. width, tempCanvas. height); 
var pattern = context. createPattern(tempCanvas," repeat" ); 
context. strokeStyle = pattern; 
context. lineWidth = lineWidth; 
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context. strokeRect(0,0,canvas. width, canvas. height); 
}; 
} 


</script> 


上 述 代码 中 ,针对 第 一 个 Canvas 元 素 ,使 用 createPattern() 方 法 创建 了 一 个 平 铺 模式 ， 
并 将 其 赋 给 fillStyle 属性 ,在 使 用 fillRect() 方 法 绘制 矩形 区 域 时 ,实现 图 像 铺 满 整个 绘制 
区 域 。 在 第 二 个 Canvas 元 素 中 ,将 createPatter() 方 法 所 创建 的 平 铺 模式 赋 给 strokeStyle 
属性 ,然后 通过 strokeRect() 方 法 进行 描 边 ,从 而 实现 图 像 边框 效果 。 在 第 三 个 Canvas 元 
素 中 ,创建 一 个 Canvas 元 素 用 来 实现 图 像 的 缩小 效果 ,然后 使 用 缩小 效果 的 Canvas 来 创建 
一 个 平 铺 模 式 , 从 而 实现 一 个 具有 较 小 图 像 的 图 形 边 框 。 代 码 运行 结果 如 图 4-32 所 示 。 

ETS 

















图 4-32 图 像 平 铺 


4.6 图形 合 


在 画布 中 绘制 图 形 图 像 时 ,会 出 现 元 素 秋 加 现象 。CanvasRenderingContext2D 对 象 中 
的 globalCompositeOperation 属性 用 来 设置 元 素 的 释 加 方式 ,常见 的 私 加 方式 有 以 下 几 种 : 
Source-over 、destination-over、source-atop 、destination-atop 、source-in 、destination-in 、 
source-out destination-out lighter、copy 和 xor 等 。 

下 述 代码 演示 了 使 用 globalCompositeOperation 属性 实现 图 形 的 合成 效果 。 

【案例 4-24】 globalCompositeOperation. html 


< canvas id = "myCanvas" width = "580" height = "300" ></canvas > 
< script type = "text/javascript"> 

Var canvas = document. getElementById( "myCanvas" ); 

Var context = canvas. getContext("2d"); 

Var rWidth = 80, rHeight = 80, cr = 40; 

var start = 20, padding = 140; 





drawFigure( start, 20, cr, "source — over"); 
drawFigure( start + padding, 20, cr, "destination — over" ); 
drawFigure( start + 2 * padding, 20, cr, "source — atop"); 
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drawFigure( start + 3 * padding, 20,cr, "multiply"); 
drawFigurel( start, 20 + padding, cr, "lighter"); 
drawFigure(start + padding, 20 + padding, cr, "xor™" ); 
drawFigurel( start + 2 * padding, 20 + padding, cr, "destination — out"); 
// 以 下 几 种 到 加 方式 需要 单独 测试 ,否则 会 与 上 述 到 加 方式 发 生 冲 突 
//drawFigurel( start, 20, cr, "source — out"); 
//drawFigurel( start + padding, 20, cr, "destination — atop"); 
//drawFigurel( start + 2 * padding, 20, cr, "source— in"); 
//drawFigure( start + 3 * padding, 20, cr, "destination — in"); 
//drawFigurel( start, 20 + padding, cr, "copy"); 
// 绘 制 琶 加 效果 
function drawFigure(rx, ry,cr,composite){ 
context. save( ); 
context. beginPath( ); 
context. fillStyle = "deepskyblue"; 
context. fillRect (rx, ry, rWidth, rHeight); 
context. globalCompositeOperation = composite; 
context. fillStyle = "mediumspringgreen" 
context, arc(rx+ rWidth, ry + rHeight, cr,0, Math. PI * 2); 
context. fil1(); 
context. restore( ); 
drawBorder (rx, ry, cr); 
drawText( composite, rx, ry, cr); 
} 
// 绘 制图 形 的 边线 
function drawBorder(rx, ry, cr){ 
context. save( ); 
context. beginPath( ); 
context. lineWidth= 2; 
context. setLineDash([3, 4]); 
context. rect (rx, ry, rWidth, rHeight); 
context. strokeStyle = "peru" 
context. stroke( ); 
context. beginPath( ); 
context.arc(rx+ rWidth, ry + rHeight, cr, 0, Math. PI * 2); 
context. stroke( ); 
context. restore( ); 





} 
// 绘 制 提示 文本 
function drawText (composite, rx, ry, cr){ 
context. save( ); 
context. beginPath( ); 
context. fillStyle = "darkmagenta"; 
context. font = "25px JasmineUPC" ; 
context. fillText (composite, rx,ry+ rHeight + cr + 10); 
context. restore( ); 
} 


</script> 


上 述 代码 中 ,分 别 绘制 了 图 形 的 source-over、 destination-over、 source-atop、multiply、 
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lighter、xor 和 destination-out 几 种 芭 加 效果 。 代 码 运行 结果 如 图 4-33 所 示 。 

















4-33 图 像 的 部 分 释 加 效果 


source-out destination-atop source-in destination-in 和 copy 贰 加 效果 如 图 4-34 所 示 。 
在 同一 个 画布 实现 这 几 种 释 加 效果 时 ,会 与 前 面 几 种 释 加 效果 产生 互 斥 ,导致 部 分 效果 无 法 
显示 ,读者 可 以 根据 浏览 器 支持 的 情况 ,对 后 面倒 加 效果 单独 进行 测试 。 

















4-34 ”图像 的 其 他 到 加 效果 


在 图 像 合 成 时 ,还 可 以 使 用 CanvasRenderingContext2D 对 象 的 globalAlpha 属性 来 设 
置 图 形 和 图 片 透明 度 ,globalAlpha 属性 的 取 值 范围 为 0.0( 完 全 透明 ) 一 1. 0( 完 全 不 透明 ) 。 

下 述 代 码 演 示 了 使 用 globalAlpha 属性 来 设置 图 形 和 图 像 的 透明 度 效果 。 

【案例 4-25】 globalAlpha. html 


< canvas id = "myCanvas" width = "400" height = "202" ></canvas > 
< script type = "text/javascript"> 

var canvas = document. getElementById( "myCanvas" ); 

var context = canvas. getContext("2d"); 

var x= 200,y= 100,width = 200, height = 100; 
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var radius = 25; 
// 绘 制 四 种 颜色 的 矩形 区 域 
context. fillStyle= '#FDO'; 
context. fillRect(0,0,width, height); 
context. fillStyle= '#6C0'; 
context. fillRect (x, 0, width, height); 
context. fillStyle= '#09F'; 
context. fillRect(0, y, width, height); 
context. fillStyle= '#F30'; 
context. fillRect (x, y, width, height); 
// 设 置 绘制 圆 形 的 填充 颜色 
context. fillStyle = '#FFF'; 
context. globalAlpha = 0.3; 
for (i=0;i<7;i+t+){ 
context. beginPath( ); 
context.arc(x,y,10 + radius * i,0,Math. PI * 2, true); 
context. fil1(); 
} 
// 绘 制 靶 心 图 案 
context. globalAlpha = 0.8; 
Var image = new Image( ); 
image. src = " images/cuckoo. png"; 
image. onload = function( ){ 
context. drawImage( image, 100, 0, width, height * 2); 
3 
</script > 


上 述 代码 中 , 先 在 画布 中 绘制 了 黄 、 绿 、 蓝 、 红 四 个 演示 矩形 区 域 ,然后 连续 绘制 了 7 个 同 
心 圆 且 透明 度 均 为 0. 3, 最 后 绘制 一 幅 透 明度 为 0. 8 的 图 像 。 代 码 运 行 结果 如 图 4-35 所 示 。 











图 4-35 globalAlpha 透明 度 ( 见 彩 插 ) 


4.7 图 形变 换 


默认 情况 下 ,Canvas 绘图 是 以 画布 的 左上 和 角 (0,0) 作 为 原点 :水平 向 右 为 x 轴 正方 向 ， 
垂直 向 下 为 y 轴 正 方向 。 而 每 幅 图 像 又 拥有 一 个 独立 的 坐标 系 ( 即 当前 坐标 系 ), 是 指 在 图 
像 绘 制 时 所 参考 的 坐标 系 ,该 坐标 系 的 默认 原点 位 于 图 像 的 左上 角 。 
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前 面 所 讲述 的 Canvas API 所 绘制 出 来 的 图 形 都 是 以 画布 的 左上 角 为 坐标 轴 原 点 ,以 图 
像 左 上 角 为 当前 坐标 系 ,使 用 像素 作为 坐标 单位 进行 绘制 。 

CanvasRenderingContext2D 对 象 中 提供 了 translate()、rotate()、scale() 和 transform() 方 
法 ,通过 坐标 轴 的 变换 处 理 , 实 现 图 像 图 形 的 旋转 、 缩 放 和 偏 移 等 效果 。 

1. translate() 方 法 

translate() 方 法 用 于 实现 坐标 轴 原 点 的 移动 ,实现 原理 如 图 4-36 所 示 ,语法 格式 如 下 。 

【语法 】 


void ctx. translate( tx, ty) 


其 中 : 
。 参数 tx 表示 沿 水 平方 向 移动 tx 个 单位 (默认 为 像素 ); 
。 参数 ty 表示 沿 垂直 方向 移动 ty 个 单位 。 





Yol 
1 
图 4-36 translate 原理 


下 述 代码 演示 了 使 用 translate() 方 法 实现 图 形 图 像 的 位 置 平移 效果 。 
【案例 4-26】 umbrella. js 


// 雨 伞 的 头 部 
function drawTop(context, fillStyle){ 
context. save( ); 
context. fil1Style = fillStyle; 
context. beginPath( ); 
context.arc(0,0,30,0,Math. PI, true); 
context. closePath( ); 
context. fill(); 
for(var i=1;i<8;i++){ 
context. beginPath( ); 
context. arc(0,0,30,0, Math. PI, true); 
context. clip(); 
context. beginPath( ); 
context. moveTo(0, — 30); 
context. lineWidth= 2; 
context. strokeStyle = "white"; 
context. lineTo(60 * Math. sin(Math. PI * 3/2 + Math. PI x* i/8), 
60 * Math. cos(Math. PI x 3/2 + Math. PI * i/8)); 
context. closePath( ); 
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context. stroke() 7 
上 
context. restore( ); 
} 
// 雨 全 的 手柄 
function drawGrip(context){ 
context. save( ); 
context. fillStyle = 'blue'7 
context. fillRect( —1.5,0,1.5,40); 
context. beginPath( ); 
context. arc( — 5, 40, 4, Math. PI, Math. PI * 2, true); 
context. stroke( ); 
context. closePath( ); 
context. restore(); 


【案例 4-27】 translate. html 


<canvas id = "myCanvas" width = "600px" height = "160px"></canvas > 
< script src= "js/umbrella. js"></script > 
< Script> 
var canvas = document. getElementById("myCanvas" ); 
Var context = canvas. getContext("2d"); 
drawTranslate( ); 
function drawTranslate( ){ 
context. translate(60,80); 
for(var i=0; i<8; i++){ 
context. save( ); 
context. translate(65 x* i,0); 
drawTop(context, 'rgb('+ (30*i)+','+(255— 30*i)+',255)"'); 
drawGrip(context); 
context. restore( ); 
lB 
} 


</script> 


上 述 代码 中 ,通过 translate() 方 法 在 每 次 绘制 图 形 之 前 进行 定位 ,循环 绘制 了 8 把 彩虹 
伞 , 效 果 如 图 4-37 所 示 。 

















图 4-37 图 形 的 平移 ( 见 彩 插 ) 
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2. rotate() 方 法 


rotate() 方 法 用 于 以 坐标 轴 原点 作为 旋转 中 心 对 图 形 进行 旋转 ,实现 原理 如 图 4-38 所 
示 , 请 法 格式 如 下 。 
【语法 】 


void ctx. rotate(angle) 


其 中 ,参数 angle 表示 旋转 的 弧度 ,使 用 公式 degree * Math. 
PI/180 实现 弧度 的 计算 ; 当 angle 为 正 数 时 表示 顺 时 针 方 向 旋 
转 ; 当 angle 为 取 负数 时 表示 道 时 针 方 向 旋转 。 

下 述 代码 演示 了 使 用 rotate() 方 法 实现 图 形 的 旋转 效果 。 

【案例 4-28】 rotate. html 图 4-38 ”图 形 旋转 原理 





< canvas id = "myCanvas" width = "300px" height = "290px"></canvas > 
< script src= "js/umbrella. js"></script > 
< Script> 
Var canvas = document. getElementById( "myCanvas" ) ; 
Var context = canvas. getContext("2d"); 
drawRotate( ); 
function drawRotate( ){ 
context. translate(150,150); 
for(var i=0; i<8; i++){ 
context. save( ); 
context. rotate(Math. PI * (2/4 + i/4)); 
context. translate(0, — 100); 
drawTop(context, 'rgb('+ (30*i)+','+(255— 30*i)+',255)"'); 
drawGrip(context); 
context. restore( ); 
} 
} 
</script> 


上 述 代码 中 ,在 绘制 每 把 彩虹 伞 之 前 ,使 用 rotate() 方 法 将 图 形 进行 旋转 ,效果 如 
图 4-39 所 示 。 
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图 4-39 图 形 的 旋转 
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3. scale() 方 法 
scale() 方 法 用 于 将 图 形 放大 或 缩小 ,语法 格式 如 下 。 
【语法 】 


void ctx. scale(sx, sy) 


其 中 : 

。 参数 sx 大 于 1 时 ,表示 在 水 平方 向 上 放大 的 倍数 ; 

。 参数 sy 大 于 1 时 ,表示 在 垂直 方向 上 放大 的 倍数 ， 

。 参数 sx 取 值 为 0 一 1 时 ,表示 在 水 平方 向 缩小 的 比例 ; 

。 参数 sy 取 值 为 0 一 1 时 ,表示 在 垂直 方向 缩小 的 比例 。 

下 述 代码 演示 了 使 用 scaleO 〇 方法 对 图 形 进行 缩小 与 放大 的 效果 。 
【案例 4-29】 scale. html 


< canvas id = "myCanvas" width = "400px"” height = "120px"></canvas > 
< script src = "js/umbrella. js"></script> 
< Script> 
var canvas = document. getElementById("myCanvas" ); 
Var context = canvas. getContext("2d"); 
drawScale() 
function drawScale( ){ 
context. translate( 40,60); 
for(var i=0; i<9; i++){ 
context. save( ); 
context. scale(i/8,i/8) 
context. translate(40 * i,0); 
drawTop(context, 'rgb('+ (30* i)+','+(255— 30*i)+',255)"'); 
drawGrip(context); 
context. restore( ); 
| 


</script > 


上 述 代码 中 ,使 用 scale( ) 方 法 依次 对 彩虹 雨伞 进行 缩放 ,效果 如 图 4-40 所 示 。 
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图 4-40 图 形 的 缩放 
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transform() 方 法 是 Canvas 2D API 通 过 矩阵 多 次 至 加 当前 变换 的 方法 ,从 而 实现 图 形 
的 缩放 、 旋 转 、 移 动 和 倾斜 效果 ,语法 格式 如 下 。 
【语法 】 


void ctx. transform(xScale, xIncline, yIncline, yScale, dx, dy) 


其 中 : 

。 参数 xScale 和 yScale 分 别 表示 在 水 平方 向 和 垂直 方向 的 缩放 比例 ; 
。 参数 xIncline 和 yIncline 分 别 表示 水 平 倾斜 和 垂直 倾斜 ; 

。 参数 dx 和 dy 分 别 表示 水 平 位 移 和 垂直 位 移 。 

下 述 代 码 演 示 了 使 用 transform() 方 法 实现 图 形 的 缩放 和 偏 移 效果 。 
【案例 4-30】 transform. html 


< canvas id = "myCanvas" width = "320px" height = "120px"></canvas > 
< Script> 
var canvas = document. getElementById("myCanvas" ); 
var context = canvas. getContext("2d"); 
for(var i=7;i>0;i--){ 
context. save( ); 
context. beginPath( ); 
context. fillStyle= 'rgb('+ Math. floor(Math. random( ) * 255) + '," 
+ Math. floor(Math. random( ) * 255) + ', '+ Math. floor(Math. random() * 255) + ')'; 
context. transform(i/3,0,0,i/3,ix (i+25),i); 
// 与 下 述 偏 移 和 缩放 效果 等 价 ,此 处 注意 translate 和 scale 的 顺序 
//context.translate(ix (ii+25),i); 
//context. scale( i/3,i/3); 
context. arc(20, 30,15,0,2 * Math. PI, true); 
context. closePath( ); 
context. fill(); 
context. restore( ); 
} 


</script> 


上 述 代码 中 ,使 用 循环 连续 绘制 了 7 个 大 小 不 同 的 彩色 圆 球 。transform() 方 法 实现 的 
效果 与 使 用 translate() 和 scale() 方 法 实现 的 效果 完全 相同 ,此 处 需要 注意 translate() 和 
scale() 方 法 的 先后 顺序 ,更 换 顺 序 时 效果 有 一 定 差异 ,读者 可 自行 测试 。 代 码 运 行 结果 如 
图 4-41 所 示 。 
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图 4-41 transform 图 形变 换 ( 见 彩 插 ) 
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4.8 图 形 渐变 


在 Canvas 元 素 中 绘制 填充 图 形 时 不 仅 可 以 使 用 单一 颜色 作为 填充 色 ,还 可 以 使 用 渐变 
色 作 为 填充 色 。 所 谓 渐变 是 指 在 填充 图 形 时 ,从 一 种 颜色 慢 慢 地 过 渡 到 另外 一 种 颜色 。 当 
使 用 渐变 色 作 为 填充 色 时 ,需要 为 fillStyle 属性 赋予 一 个 CanvasGradient 类 型 的 对 象 ,作为 
填充 的 渐变 色 。 渐 变 的 方式 分 为 线性 渐变 和 径 向 渐变 。 

1. 线性 渐变 

线性 渐变 (liner gradient) 是 指 沿 着 直线 方向 设 定 若干 颜色 点 ,颜色 点 之 间 形 成 渐变 色 。 
CanvasRenderingContext2D 对 象 提供 了 createLinearGradient( ) 方 法 ,用 于 创建 一 个 沿 参数 
坐标 所 设 定 直线 的 渐变 ,该 方法 返回 一 个 LinearGradient 类 型 的 对 象 ,语法 格式 如 下 。 

【语法 】 





LinearGradient ctx. createLinearGradient (x0, y0, x1, y1) 


其 中 : 

。 参数 x0 和 y0 表示 渐变 色 的 起 始点 坐标 (x0,y0); 

。 参数 xl 和 yl 表示 渐变 色 的 结束 点 坐标 (xl,yl) 。 

LinearGradient 对 象 仅 提供 了 一 个 addColorStop() 方 法 ,用 于 向 渐变 线 中 添加 颜色 点 ， 
而 颜色 点 由 偏 移 量 (offset) 和 颜色 值 (color) 两 部 分 构成 。 偏 移 量 的 取 值 为 [0,1], 当 超出 该 
范围 时 将 会 抛 出 INDEX_SIZE_ERR 错误 ; 当 颜 色 值 不 能 被 解析 时 ,将 会 抛 出 SYNTAX_ 
ERR 错误 。 

【示例 】 添加 渐变 色 


var gradient = context. createLinearGradient(20, 20,100,100); 
gradient. addColorStop(0, "#FFB90F"); 

gradient. addColorStop(0.4,"#A3A3A3"); 

gradient. addColorStop(1," #008B00"); 


下 述 代码 演示 了 使 用 creatLinearGradient() 方 法 实现 线性 渐变 填充 效果 。 
【案例 4-31】 linerGradient. html 


< canvas id = "myCanvas" width = 480px" height = "100px"></canvas > 
< Script> 
Var canvas = document. getElementById("myCanvas" ); 
Var context = canvas. getContext("2d"); 
var x= 30,y= 50, radius = 30, num= 9; 
var gradient = context. createLinearGradient (x, y, x + (radius + 20) * num, 
Y); 
context. translate(10,0); 
for(var i=0; i<num; i++){ 
var color = 'rgb('+ Math. floor(Math. random() * 255)+'," 
+ Math. floor(Math. random( ) * 255) + ', ' + Math. floor(Math. random() * 255) + ')'; 
gradient. addColorStop(i/10, color); 
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context.arc(x+ (radius + 20) * i,y, radius, 0,2 * Math. PI, true); 
} 
context.fillStyle = gradient; 
context. fill1(); 

</script > 


上 述 代 码 中 ,创建 了 一 个 线性 渐变 色 gradient 对 象 ,并 为 其 添加 9 个 颜色 点 。 通 过 循环 


方式 连续 绘制 了 9 个 相 邻 的 圆 形 路 径 ,使 用 gradient 对 象 作 为 渐变 填充 色 进 行 填充 ,效果 如 
图 4-42 所 示 。 
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图 4-42 线性 渐变 色 ( 见 彩 插 ) 


2. 径 向 渐变 

径 向 渐变 (radial gradient) 又 称 放射 性 渐变 ,是 指 沿 着 两 个 圆心 的 方向 向 外 逐渐 扩散 的 
渐变 方式 。CanvasRenderingContext2D 对 象 提供 了 createRadialGradient() 方 法 ,用 于 绘制 
放射 性 渐变 ,该 方法 返回 一 个 RadialGradient 对 象 ,语法 格式 如 下 。 

【语法 】 


RadialGradient ctx. createRadialGradient (x0, y0, r0, x1, yl,r1) 


其 中 : 

。 参数 x0 和 y0 表示 起 始 圆 的 圆心 坐标 (x0,y0); 
。 参数 r0 表示 起 始 圆 的 半径 ; 

。 参数 xl 和 yl 表示 终点 圆 的 圆心 坐标 (xl,yl); 
。 参数 rl 表示 终点 圆 的 半径 。 


圆 的 大 小 和 位 置 ,从 起 始 圆 心 处 开始 向 外 渐变 扩散 ,直到 终点 圆 的 外 轮廓 为 止 。 


.当下 地 加 和 给 志 国之 则 不 存在 包含 关系 时 ,不 同 的 浏览 器 对 渭 变 处 理 方式 也 不 一 
EB 致 ,显示 结果 存在 一 定 的 差异 。 


下 述 代码 演示 了 使 用 createRadialGradient() 方 法 来 创建 一 个 旋转 的 彩色 风车 。 
【案例 4-32】 radialGradient. html 


< canvas id = "myCanvas" width = "230px" height = "230px"></canvas > 
< Script> 
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Var canvas = document. getElementById("myCanvas" ) ; 


// 风 车 叶子 的 颜色 ,颜色 的 种 类 决定 风车 叶子 的 数量 
var color = ["#FF0000", "# EEEE00", "#0000FF", "#00FFOO", 





"#A020F0", " # ADFF2F"]; 回 
var radius = 50; // 整 个 风车 的 半径 Ny 
var wheelRadius = 50; // 风 车 叶子 的 半径 案例 视频 六 姑 
var part = 50; //PI/2 分 成 几 份 
var context = canvas. getContext("2d"); // 获 取 上 下 文 
var num = color. length; // 叶 子 的 数量 
var center = {x:canvas. width/2, y:canvas. height/2}; // 绘 图 区 域 的 中 心 
var point; // 叶 子 圆心 位 置 
var start= 0; // 绘 制 叶子 的 开始 角 
var angle= 0; 
var end = Math. PI; // 绘 制 叶子 的 结束 角 
var offset = Math. PI * (360/num)/180; // 两 个 相 邻 叶子 之 间 的 角度 
rotateAngle = offset/part; // 每 次 旋转 的 角度 
function drawWindmill( ){ 
context. clearRect(0,0, canvas. width, canvas. height); 
for(var i=0; i<num; i++){ 
context. beginPath( ); // 开 始 绘制 叶子 


// 创 建 径 向 渐变 
var wheelGradient = context. createRadialGradient (center. x, center.Yr 
100, center. x, center. y, 0); 


wheelGradient. addColorStop(0, color[i]); // 起 始 颜色 
wheelGradient. addColorStop(1, "#000"); // 结 束 颜色 
context. fillStyle = wheelGradient; // 填 充 渐变 样式 
// 叶 子 圆 心 位 置 

point ={ 


x:center.x+ Math. cos(offset * i+ angle) * radius, 
y:center. y+ Math. sin(offset * i+angle) * radius 
}; 


var x= start + offset * 1; // 绘 制 叶子 的 开始 角 
var y= end + offset x i; // 绘 制 叶 子 的 结束 角 
context. arc(point. x, point. y, wheelRadius, x, y, false); // 绘 制 

context. fill1(); // 填 充 

context. closePath( ); // 结 束 绘制 


} 

context. beginPath( ); 

Var dotGradient = context. createRadialGradient (center. x, center.y,0, 
center. x, center. y, 40); 

dotGradient. addColorStop(0,"#fff"); 

dotGradient.addColorStop(1, "#666"); 

context. fillStyle = dotGradient; 

context. arc(center. x, center. y, 25,0,2 * Math. PI, false); 

context. fill(); 

context. closePath( ); 

angle += rotateAngle; 

start = angle; 

end = Math. PI + angle; 

requestanimationFrame(drawWindmill); 
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drawWindmill1(); 
</script> 


上 述 代 码 中 ,使 用 color 数组 存放 风车 叶片 的 颜色 ,color 数组 的 长 度 决定 风车 叶片 的 多 
少 。 在 drawWindmill() 方 法 中 通过 循环 方式 来 绘制 风车 的 叶片 ,接着 绘制 风车 的 中 心 区 
域 ,最 后 使 用 requestAnimationFrame() 方 法 实现 风车 的 旋转 。 代 码 运行 结果 如 图 4-43 
所 示 。 
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本 章 总 结 


HTML 5 规范 新 增 了 Canvas 元 素 , 用 于 实现 网 页 中 的 绘图 功能 ; 当 需 要 在 画布 中 
绘制 内 容 时 ,需要 借助 JavaScript 脚本 来 实现 图 形 图 像 的 绘制 。 

DOM Canvas 元 素 提供 了 HTMLCanvasElement 接口 ,该 接口 提供 了 Canvas 元 素 
布局 与 呈现 的 操作 方法 。 

通过 HTMLCanvasElement 元 素 的 getContext() 方 法 来 返回 一 个 具有 绘图 功能 的 
context 对 象 ,为 不 同 的 环境 (2D 或 3D) 提 供 不 同 的 绘制 类 型 。 

在 Canvas 画布 中 ,坐标 原点 (0,0) 位 于 画布 的 左上 角 ,X 轴 沿 着 水 平方 向 向 右 延 伸 ， 
Y 轴 沿 垂直 方向 向 下 延伸 。 

CanvasRenderingContext2D 对 象 提供 了 strokeRect() ,fillRect() 和 clearRect() 三 
个 绘制 矩形 的 方法 。 

HTML 5 Canvas 提供 了 strokeText() 和 fillText() 两 种 绘制 文本 的 方法 。 

在 HTML 5 Canvas 中 ,基本 图 形 都 是 以 路 径 为 基础 ,每 一 条 子路 径 都 是 以 上 一 条 路 
径 的 终点 作为 起 点 ,由 多 条 子路 径 组 合 到 一 起 构成 路 径 。 

在 绘制 图 像 时 ,不 仅 可 以 对 图 像 进 行 缩放 和 裁剪 等 ,还 可 以 对 图 像 进行 像素 级 处 理 ， 
如 红色 通道 .绿色 通道 . 蓝 色 通道 .透明 度 及 水 印 等 效果 。 

图 像 是 由 像素 构成 的 ,每 个 像素 是 由 红 (R)、 绿 (G)、 蓝 (B) 和 透明 度 (A) 四 部 分 构 
成 ,通过 对 像素 的 RGBA 进行 处 理 从 而 实现 图 像 的 颜色 变换 、 透 明度 的 调整 等 
效果 。 
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。 图 像 平 铺 是 一 种 比较 重要 的 技术 ,用 于 将 图 像 按照 一 定 比 例 缩放 后 对 画布 进行 平 
铺 。CanvasRenderingContext2D 对 象 提供 了 translate ()、rotate()、scale() 和 
transform( ) 方 法 ,通过 坐标 轴 的 变换 处 理 ,实现 图 像 图 形 的 旋转 、 缩 放 和 偏 移 等 
效果 。 

。 线性 渐变 (Liner Gradient) 是 指 沿 着 直线 方向 设 定 若干 颜色 点 ,颜色 点 之 间 形 成 渐 
变色 。 

。 径 向 渐变 (Radial Gradient) 又 称 放射 性 渐变 ,是 指 沿 着 两 个 圆心 的 方向 向 外 逐渐 扩 
散 的 渐变 方式 。 


本 章 练习 


1. 下 列 选项 中 ,关于 Canvas 元 素 说 法 错误 的 是 
A. Canvas 元 素 本 身 是 一 种 普通 的 HTML 元 素 
B. Canvas 仅 能 用 于 指定 绘制 的 区 域 
C. 推荐 使 用 CSS 样式 来 设置 Canvas 元 素 的 大 小 ,以 实现 CSS 样式 与 HTML 代码 


分 离 
D. Canvas 自身 不 具有 绘制 功能 , 当 需 要 在 画布 中 绘制 内 容 时 ,需要 借助 JavaScript 
脚本 实现 图 像 的 绘制 
2. 下 列 选 项 中 ,关于 Canvas 坐标 系 说 法 错误 的 是 。 


A. 坐标 原点 (0,0) 位 于 画布 的 左上 角 
B. 坐标 原点 (0,0) 位 于 画布 的 左下 角 
C. X 轴 沿 着 水 平方 向 向 右 延 伸 
D. YY 轴 沿 垂直 方向 向 下 延伸 
3. lineJoin 属性 用 于 设置 线段 、 圆 弧 .曲线 之 间 连 接点 的 风格 ,下 列 选项 中 不 是 lineJoin 


属性 取 值 的 是 。 
A. miter B. round C. bevel D. solid 
4. 下 列 方法 中 ,用 于 填充 一 个 矩形 区 域 的 是 。 
A. strokeRect() B. fillRect() C. clearRect() D. rect() 
5. 下 列 方法 用 于 结束 当前 子路 径 列表 并 创建 一 个 新 的 路 径 。 
A. stroke() B. beginPath() C. fill() D. closePath() 
6. 下 列 方法 用 于 绘制 椭圆 形 的 路 径 。 
A. ellipse() B. rect() C. arc() D. arcTo() 
7. 关于 Canvas 图 像 处 理 说 法 错误 的 是 o 


A. createImageData() 方 法 用 于 创建 一 个 新 的 .空白 的 、 指 定 大 小 的 ImageData 对 
象 ,该 对 象 中 所 有 的 像素 都 是 透明 的 

B. putImageData() 方 法 用 于 将 ImageData 对 象 中 的 data 数据 (像素 集合 ) 绘 制 到 画 
布 中 

C. getImageData( ) 方法 用 于 从 画布 中 获取 一 个 图 像 的 像素 集合 ,返回 一 个 
ImageData 类 型 的 数据 对 象 
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D. drawImage() 方 法 用 于 将 ImageData 对 象 中 的 data 数据 (像素 集合 ) 绘 制 到 夯 
布 中 

. 下 列 关 于 图 像 变换 说 法 错误 的 是 法 

A. translate() 方 法 用 于 实现 坐标 轴 原 点 的 移动 

B. rotate() 方 法 用 于 以 坐标 轴 原 点 作为 旋转 中 心 对 图 形 进行 旋转 

C. scale() 方 法 用 于 将 图 形 放大 或 缩小 

D. transform() 方 法 是 Canvas 2D API 通过 矩阵 多 次 至 加 当前 变换 ,实现 图 形 的 缩 
放 和 旋转 效果 ,而 移动 和 倾斜 效果 无 法 使 用 此 方法 来 实现 





人 AS 本 章 目标 


。 了 解 SVG 发 展 历程 及 特点 。 

。 熟悉 SVG 的 使 用 方式 。 

。 掌握 SVG 基本 数据 类 型 和 框架 元 素 。 

。 熟练 使 用 SVG 绘制 各 种 形状 元 素 和 文本 内 容 。 
。 了 解 SVG 路 径 的 绘制 原理 。 

。 热 悉 SVG 样式 及 渐变 填充 。 

。 了 解 SVG 滤 镜 的 使 用 。 

。 了 解 SVG 的 事件 机 制 和 动画 原理 。 


5.1 SVG 概述 


SVG(Scalable Vector Graphics) 是 一 种 可 缩放 的 矢量 图 形 ,通过 XML 语言 格式 来 描述 
定义 图 形 。 使 用 SVG 技术 可 以 在 网 页 中 绘制 出 各 种 形状 的 高 品质 矢量 图 形 ,常见 的 矢量 图 
包括 图 形 .文字 \ 动 画 、 色 彩 和 滤 镜 效果 等 。 

在 SVG 出 现 之 前 , Web 设计 师 需 要 使 用 像素 形式 来 定义 图 形 ,这 种 图 形 使 用 点 阵 形式 
进行 存储 ,图 形 放大 时 会 造成 一 定 的 失真 , 当 存储 的 图 形 过 大 时 又 会 消耗 一 定 的 存储 空间 ， 
在 网 络 传输 时 也 占用 较 多 的 带宽 。SVG 的 出 现 有 效 地 解决 了 上 述 问题 ,Web 设计 师 可 以 通 
过 矢量 方式 来 实现 各 种 高 质量 的 图 形 。 

在 HTML 5 Canvas 画布 中 ,所 绘制 的 图 形 都 是 以 像素 形式 进行 泻 染 的 ,在 图 形 绘制 完 
成 之 后 ,浏览 器 不 再 关注 Canvas 画布 ; 当 Canvas 位 置 发 生 改 变 时 ,整个 画布 都 需要 重新 绘 
制 。 在 HTML 5 规范 中 新 增 了 SVG 元 素 , 用 于 在 页 面 中 绘制 矢量 图 ; 在 SVG 图 形 中 每 个 
绘制 图 形 均 被 视 为 对 象 , 当 对 象 属性 发 生 改变 时 ,浏览 器 将 会 自动 重 绘 该 对 象 。 


5.1.1 SVG 发 展 历程 


1998 年 由 Adobe .Sun 等 公司 向 W3C 联盟 提出 了 PGML(Precision Graphics Markup 
Language, 精 度 图 像 标 记 语言 ) 提 案 ,而 此 时 微软 和 Macromedia 等 公司 也 向 W3C 联盟 提出 
了 VML(Vector Markup Language, 矢 量 标记 语言 ) 提 案 。 虽 然 VML 和 PGML 具有 很 多 
相似 性 ,但 VML 比较 适合 用 普通 矢量 图 形 , 而 PGML 能 够 满足 专业 设计 和 出 版 等 方面 的 
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需求 。 为 了 进一步 促进 图 像 标 准 的 发 展 , W3C 专门 成 立 了 SVG 工作 组 ,其 中 包括 Apple、 
Netscape\、Microsoft\Sun、 HP 、IBM、Autodesk、Adobe、BitFlash、Visio、Xerox、Macromedia 、 
Corel、Quark、RAL(CCLRC) 等 知名 公司 。SVG 工作 组 结合 了 VML 和 PGML 的 优势 ,最 
终 推出 了 新 的 标准 矢量 格式 一 一 SVG 格式 。SVG 发 展 历程 见 表 5-1。 


表 5-1 SVG 发 展 历程 


























时 间 发 展 历 程 
1992 年 2 月 W3C 推出 SVG 工作 草案 
2000 年 8 月 W3C 发 布 SVG 标准 草案 
2001 年 9 月 W3C 正式 发 布 SVG 1.0 标准 
2003 年 1 月 W3C 发 布 SVG 1.1 版 本 
2005 年 4 月 W3C 发 布 SVG 1. 2 版 本 的 工作 草案 
2006 年 8 月 SVG 为 移动 设备 提供 了 标准 SVG Tiny 1. 2 版 本 
2011 年 8 月 W3C 推出 SVG 1. 1 Second Edition 


目前 , W3C 推荐 使 用 SVG 1. 1 版 本 ; 而 SVG 2.0 正在 开发 中 ,此 版 本 提高 了 SVG 的 
易 用 性 ,通过 结合 HTML CSS 和 JavaScript 技术 来 实现 更 加 绚丽 的 效果 。 截 至 2018 年 6 
月 ,大 部 分 浏览 器 暂 未 对 SVG 2. 0 进行 支持 ,有 关 SVG 最 新 资讯 可 以 在 https://www. 
w3. org/Graphics/SVG/ 官 方 网 站 获取 。 


5.1.2 SVG 特点 


SVG 和 Canvas 元 素 都 能 够 在 浏览 器 中 绘制 图 形 ,但 其 根本 原理 是 不 同 的 。Canvas 绘 
图 是 使 用 JavaScript 技术 来 绘制 2D 或 3D 图 形 ,在 绘制 过 程 中 使 用 像素 形式 进行 泻 染 ; 当 
Canvas 绘制 完成 后 ,能够 以 png 或 jpg 格式 进行 存储 。Canvas 图 形 的 清晰 度 依赖 于 图 形 的 
分 辩 率 , 且 不 支持 局 部 元 素 的 事件 处 理 ; 在 操作 过 程 中 需要 为 整个 Canvas 绑 定 事件 ,在 事 
件 的 处 理 方法 中 判断 该 事件 来 自 Canvas 中 的 哪个 图 形 ; Canvas 比较 适合 用 于 开发 图 像 密 
集 型 的 游戏 。 

与 Canvas 相 比 ,SVG 具有 文本 独立 性 、 高 品质 矢量 图 、 超 强 交互 性 、 超 强 颜 色 控 制 基 
于 XML 等 特点 ,具体 如 下 。 

1. 文本 独立 性 

SVG 中 的 文本 与 图 形 相 互 独立 ,文本 标注 允许 被 动态 地 移动 和 缩放 ,方便 实现 在 SVG 
图 形 中 检索 文本 标注 。 普 通 图 像 中 的 文本 对 于 搜索 引擎 的 检索 有 一 定 的 难度 ,需要 通过 图 
像 识 别 技术 才能 完成 ,但 在 识别 过 程 中 会 存在 一 定 的 误差 ; 而 SVG 中 的 文字 能 够 比较 容易 
地 被 搜索 引擎 检索 到 。 

2. 高 品质 矢量 图 

普通 图 像 在 放大 过 程 中 会 变 得 越 来 越 不 清晰 ,而 SVG 图 像 能 够 适应 任何 分 辩 率 的 屏幕 
或 打印 机 ,并 保持 原 有 的 清晰 度 。 用 户 可 以 自由 缩放 SVG 图 像 而 不 会 影响 图 像 的 清晰 度 ， 
这 对 于 查看 图 像 细 节 非 常 有 用 ,如 查看 数据 图 像 中 的 数字 。 除 此 之 外 ,SVG 还 提供 了 一 些 
非常 优秀 的 特效 ,如 模糊 、 阴 影 、 光 线 等 动态 效果 。 

3. 超 强 交互 性 

通过 DOM 编程 技术 ,可 以 动态 地 创建 一 个 包含 SVG 图 像 的 Web 页 面 ,针对 用 户 的 不 
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同 操作 做 出 不 同 的 响应 (如 声效 动画 等 特效 ) ,从 而 设计 出 功能 较 强 的 动态 交互 。 而 GIF 
和 JPEG 等 栅 格 格式 的 图 像 都 较 难 实现 交互 效果 。 

4. 超 强 颜色 控制 

SVG 提供 了 一 个 1600 万 色彩 的 调 色 板 , 支 持 ICC 标准 .RGB、 线 性 填充 和 遮 单 , 具 有 超 
强 的 色彩 控制 能 力 。 

5. 基于 XML 

SVG 使 用 XML 形式 来 组 织 和 传递 数据 ,具有 XML 所 具有 的 特点 ,不 仅 能 够 跨 平台 ， 
还 可 跨越 设备 ,XML 数据 与 表现 形式 的 分 离 使 其 成 为 不 同 终端 交换 信息 的 载体 。 

SVG 允许 在 图 像 质 量 不 下 降 的 情况 下 被 放大 ,多 用 于 数据 展示 方面 ,而 不 适合 游戏 应 
用 。SVG 为 图 形 对 象 提供 了 事件 处 理 的 支持 ,可 以 更 加 灵活 地 实现 动态 交互 效果 。 当 
SVG 对 象 的 某 一 属性 发 生 改变 时 ,浏览 器 将 自动 重 现 图 形 , 因 此 ,复杂 度 较 高 的 图 形 会 减 慢 
泻 染 速 度 。 


5.1.3 SVG 的 使 用 


SVG 是 一 种 用 来 描述 二 维和 撩 量 图 形 的 XML 标记 语言 ,能 够 以 单独 文件 进行 存储 , 文 
件 的 后 级 为. svg, 浏 览 器 能 够 直接 解析 SVG 文件 ,并 将 矢量 图 绘制 出 来 。 下 述 代 码 演示 了 
SVG 文件 的 基本 结构 。 

【案例 5-1】 svgDemo. svg 


<?xml version= "1.0" standalone = "no"?> 
<! DOCTYPE svg PUBLIC " - //W3C//DTD SVG 1.1//EN" 
"http://www. w3. org/Graphics/SVG/1.1/DTD/svgl1. dtd"> 
< svg version = "1.1" xmlns = "http://www. w3.org/2000/svg"> 
<rect x= "50" y= "40" width= "100" height = "100" stroke = "green" 
stroke — width= "6" fill = "yellow" /> 
<circle cx= "100" cy= "90" r = "40" stroke=" 井 EE4000" 
stroke -width= "8" fill="#CDCD00"/> 
</svg> 


从 上 述 代码 中 可 以 看 出 ,SVG 与 XML 非常 相似 ,第 一 行 作为 XML 文档 声明 ,其 中 
standalone 属性 用 于 说 明 SVG 文件 是 否 独 立 。 当 standalone 属性 为 yes 时 ,说 明 当 前 SVG 
文档 是 独立 的 ,不 能 引用 外 部 的 DTD 规范 文件 ; 当 standalone 属性 为 no 时 ,说 明文 档 不 是 
独立 的 ,可 以 引用 外 部 的 DTD 规范 文档 。 

第 二 行 中 的 DOCTYPE 声明 用 于 指明 SVG 的 版 本 号 以 及 所 引用 的 DTD 文件 的 URL 
地 址 ; 在 指定 的 DOCTYPE 声明 中 ,当前 SVG 文件 的 根 元 素 是 svg 元 素 ,其 中 包含 所 有 的 
SVG 子 元 素 。 

上 述 代码 中 ,在 < svg > 标签 中 包含 < rect > 和 < circle > 两 个 子 标签 ,分 别 用 于 绘制 圆 形 和 
和 矩形。 代码 在 浏览 器 中 运行 的 结果 如 图 5-1 所 示 。 

在 HTML 5 之 前 ,可 以 使 用 object 和 iframe 元 素来 嵌入 SVG 文件 。 在 HTML 5 中 对 
SVG 进行 改进 ,推荐 使 用 embed 元 素来 嵌入 SVG 文件 ; 当 SVG 内 容 较 少时 ,HTML 5 推 
荐 使 用 svg 元 素 将 SVG 内 容 直 接 府 入 HTML 代码 中 。 
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5-1 SVG 图 形 








“中 在 页 面 中 使 用 embed .object 或 iframe 元 素来 嵌入 SVG 文件 时 ,Firefox 和 Chrome 
"2 测 览 加 都 能 较 好 地 进行 支持 ,但 JE 浏览 器 对 其 支持 度 较 差 。 

1. 使 用 embed 元 素 嵌 入 SVG 

HTML 5 中 新 增 了 embed 元 素 , 用 来 定义 嵌入 的 内 容 , 如 SVG 图 形 .Flash 动画 以 及 插 
件 等 ,目前 所 有 主流 浏览 器 都 支持 embed 元 素 ; 使 用 embed 元 素 央 入 SVG 文件 时 ,允许 在 
SVG 文件 中 使 用 脚本 。 下 述 代 码 演 示 了 使 用 embed 元 素 嵌 入 SVG 文件 。 

【案例 5-2】 embed_svg. html 


<!DOCTYPE html > 
< htm]l > 
<head > 
<meta charset = "UTF — 8"> 
<title> embed 嵌 人 SVG</title> 


</head> 
<body> 
< embed src 一 "svgDemo.svg" width 一 "300" height 王 "200" type 一 "image/svg 十 xml"/> 
</body> 
</html> 
上 述 代码 中 ,使 用 embed 元 素 谋 入 外 部 SVG 文件 ,其 中 src 属性 用 于 指明 所 赃 入 文件 
的 URL 地 址 ,type 属性 用 于 指明 所 嵌入 内 容 的 MIME 类 型 , width 属性 用 于 设置 所 嵌入 内 
容 的 宽度 ,height 属性 用 于 设置 所 嵌入 内 容 的 宽度 。 


2. 使 用 object 元 素 嵌 入 SVG 
object 元 素 是 HTML 4 中 的 标准 元 素 . 所 有 较 新 的 浏览 器 都 支持 该 元 素 , 其 缺点 是 不 


允许 使 用 脚本 。 下 述 代 码 演示 了 使 用 object 元 素 戏 入 SVG 文件 。 
【案例 5-3】 object_svg. html 


<!DOCTYPE htm] > 
<html> 
<head> 
<meta charset = "UTF — 8"> 
<title>object 嵌入 SVG</title> 
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</head> 
< body> 
< object data = " svgDemo. svg” width = "300" height = "200" type = " image/ svg + xml" /> 
</body> 
</html > 





上 述 代码 中 ,使 用 object 元 素 骨 入 SVG 文件 ,其 中 data 属性 用 于 指定 所 引用 对 象 数据 
的 URL 地 址 ,type 属性 用 于 指明 所 嵌入 内 容 的 MIME 类 型 。 

3. 使 用 iframe 元 素 嵌 入 SVG 

HTML 5 中 保留 了 iframe 元 素 , 并 对 其 进行 了 改良 ,使 用 iframe 元 素 也 可 以 嵌入 SVG 
文件 。 下 述 代码 演示 了 使 用 iframe 元 素 能 入 SVG 文件 。 

【案例 5-4】 iframe_svg. html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF — 8"> 
<title> iframe 钥 人 SVG</title> 
</head> 
<body> 
< iframe src = " svgDemo. svg" width ="300" height = "200"></iframe> 
</body> 
</html > 


人 前 面 所 讲述 的 embed_svg. html、object_svg. html 和 iframe_svg. html 三 个 页 面 能 
E53 够 在 Firefox 和 Chrome 浏览 器 中 进行 预览 ,而 在 IE 中 无 法 预览 。 


4. 使 用 svg 元 素 嵌 入 SVG 

HTML 5 规范 中 新 增 了 svg 元 素 , 用 于 将 SVG 内 容 直 接 嵌 入 HTML 代码 中 。 下 述 代 
码 演 示 了 使 用 svg 元 素来 授信 SVG 内 容 。 

【案例 5-5】 HTMLS5_svg. html 


<!DOCTYPE html > 
< html > 
< head > 
<meta charset = "UTF ~ 8"> 
<title> svg 元 素 的 使 用 </title> 
< style type = "text/css"> 
.five— pointed— star{ 
fill:lime; stroke:purple; stroke— width:5;fill- rule:evenodd; 
} 
.container{ 
margin:0 auto;width: 200px; 
| 
</style> 
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</head> 
<body> 
<div class = "container"> 
< svg width = "200" height = "190"> 
< polygon points = "100,10 40,180 190,60 10,60 160,180" dx= "50" 
class = "five— pointed — star"/> 
</svg> 
</div> 
</body> 
</html > 


上 述 代 码 中 ,使 用 svg 元 素 直 接 嵌 入 svg 图 形 , 其 中 polygon 元 素 用 于 创建 一 个 多 边 
形 , 此 处 创建 了 一 个 五 角 星 ,然后 使 用 class 样式 来 设置 五 角 星 的 边线 以 及 填充 样式 。 代 码 
运行 结果 如 图 5-2 所 示 。 
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图 5-2 svg 绘制 五 角 星 


人 当 svg 数据 量 较 少 时 ,推荐 使 用 svg 元 素 直 接 谋 入 HTML 页 面 中 ; 当 svg 数据 量 较 
多。 多 时 ,推荐 在 页 面 中 通过 embed 元 素来 嵌入 svg 外 部 文件 。 


5.2 SVG 基本 数据 类 型 


SVG 是 XML 规范 的 一 个 分 支 ,作为 一 门 计 算 机 描述 语言 ,数据 类 型 是 必 不 可 少 的 要 
素 。SVG 中 提供 了 多 种 数据 类 型 ,除了 常见 的 整 型 (integer) 数值 型 (number)、 百 分 比 
(percentage) 和 日 期 型 (date) 外 ,还 提供 了 如 角度 值 .颜色 值 . 坐 标 值 .频率 值 等 的 数据 类 型 。 

1. 整 型 .数值 型 和 百分比 

整 型 是 由 正 负 号 和 数字 构成 的 数值 , 且 不 带 小 数 点 , 取 值 范围 一 般 为 一 ?2 一 ?2 一 1。 特 
殊 规定 的 属性 除外 ,如 颜色 值 的 最 大 值 只 能 是 255。 

数值 型 是 指 带 小 数 点 的 值 ,包括 使 用 科学 计数 法 所 产生 的 值 。 当 进行 复杂 运算 时 ,推荐 
使 用 双 精 度数 值 来 计算 ,以 避免 精度 不 足 而 引起 效果 失真 。 

百分比 是 指 带 有 百 分 号 (%) 的 数值 .常用 来 表示 相对 的 数值 。 在 SVG 中 ,许多 属性 都 
允许 使 用 百分比 数值 。 
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2. 角度 值 和 颜色 值 

在 整 型 和 数值 型 数据 之 后 跟着 一 个 角度 单位 就 构成 了 角度 值 , 角 度 值 有 以 下 三 种 单位 : 
度 (deg)、 梯 度 (grad) 和 弧度 (rad) 。 在 CSS 样式 中 ,角度 必须 带 有 单位 ; 而 在 SVG 中 ,角度 
值 默 认 单位 是 度 (deg)。 

在 SVG 中 使 用 颜色 值 (color) 对 color 属性 进行 赋值 ,颜色 值 还 可 以 用 于 fill、 stroke、 
stop-color ,flood-color 和 lighting-color 属性 。 颜 色 有 以 下 三 种 表达 方式 : 颜色 关键 字 、 数 
字 式 RGB 和 RGB 函数 。 

颜色 关键 字 是 指使 用 red、green、blue 等 关键 字 直 接 表示 某 种 颜色 ,在 SVG 中 提供 了 
147 种 颜色 关键 字 ,基本 可 以 满足 平常 的 需要 。 

数字 式 RGB 是 指 以 “# ”开头 , 其 后 跟着 十 六 进 制 数字 的 形式 ,用 来 表示 红 、 绿 、 蓝 分 量 
值 ,如 “#AADDCC”#AE3” 等 形式 。 

RGB 函数 是 将 一 组 三 个 数字 转换 成 颜色 值 , 数 字 之 间 使 用 逗号 (,) 隔 开 ,三 个 数字 分 别 
表示 红 、 绿 、 蓝 分 量 值 ,如 rgb(128,230,100) 形 式 。 

3. 坐标 值 和 长 度 值 

坐标 值 C(coordinate) 是 指 坐 标 系统 中 的 一 种 长 度 , 坐 标 值 由 X 轴 和 YY 轴 的 方向 值 构成 。 

长 度 值 是 一 种 距离 的 度量 ,可 以 使 用 数值 型 和 百分比 来 表示 。 当 长 度 值 的 度量 单位 是 
pt.pc、cm、mm 和 in 时 表示 是 一 种 绝对 距离 ,这 种 绝对 距离 和 具体 显示 设备 之 间 的 转换 由 
SVG 客户 端 程序 来 完成 。 

4. 列表 值 和 绘图 值 

列表 值 (list of sometype) 是 一 系列 按 顺序 排列 的 同 种 类 型 的 数值 ,各 个 数值 之 间 使 用 
逗号 隔 开 。 绘 图 值 Cplant) 多 用 于 fill 和 stroke 等 属性 ,用 于 设置 绘图 效果 。 

5. 时 间 值 ,频率 值 和 URI 

时 间 值 (time) 是 指 一 个 带 有 时 间 度 量 单位 的 数值 型 数据 ,常见 的 时 间 度 量 单位 有 ms 
(毫秒 ) 和 s( 秒 )。 

频率 值 (frequency) 用 于 产生 声音 效果 ,通常 在 数值 之 后 带 有 频率 单位 ,如 Hz( 赫 效 ) 和 
kHz( 千 赫兹 )。 

URI 是 统一 资源 标识 符 , 用 于 指示 网 络 中 某 一 资源 的 地 址 ,多 用 于 超 链接 中 。 


5.3 SVG 框架 元 素 


与 HTML 文档 相似 ,SVG 也 有 基本 的 框架 元 素 , 如 svg、g、defs、symbol 和 use 元 素 。 
1. svg 元 素 
在 SVG 中 ,svg 元 素 作为 根 元 素 , 其 他 元 素 都 是 svg 元 素 的 子 元 素 。svg 元 素 的 属性 见 
表 5-2。 
表 5-2 svg 元素 的 属性 





属性 描 述 
width 表示 SVG 文档 矩形 区 域 的 宽度 ,默认 为 100% 








height 表示 SVG 文档 矩形 区 域 的 高 度 ,默认 为 100% 
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续 表 
属性 描 述 

用 于 声明 用 户 自己 的 坐标 系 ,其 属性 值 由 min-x、min-y、width 和 height 构成 ,两 者 之 
viewBox 间 使 用 逗号 或 空格 隔 开 ; min-x 和 min-y 用 于 决定 viewBox 的 左上 角 ,width 和 height 

用 于 决定 viewBox 的 宽度 和 高 度 
xmlns[ :prefix] | XML 通用 属性 ,用 于 指明 命名 空间 
人 viewBox( 视 区 盒子 ) 用 于 将 viewBox 区 域 的 内 容 铺 满 整个 SVG 区域 ,从 而 实现 放 
EE。 大 或 缩小 效果 。 通 俗 来 说 ,如 果 SVG 是 显示 器 的 屏幕 ,viewBox 是 截屏 工具 所 截取 


的 区 域 , 最 终 效 果 是 将 所 截取 的 区 域 在 显示 器 中 全 屏 显示 。 


2. g 元 素 

g 元素 是 一 种 容器 ,用 于 将 多 个 子 元 素 组 合成 一 个 整体 ; g 元 素 的 属性 允许 被 子 元 素 继 
承 ; 当 g 元素 的 属性 发 生变 化 时 , 子 元 素 也 将 随 之 改变 。 

【案例 5-6】 g_element. html 


< svg width="100%" height= "100%" viewBox= "0 0 120 50" 
xmlns = "http://www. w3.org/2000/svg"> 
<g stroke = "green" fill="#ClFFC1" stroke - width = "3"> 
<circle cx= "25" cy= "25" = "5" /> 
<circle cx= "40" cy= "25" = "10" /> 
<circle cx= "60" cy= "25" r= "15"” /> 
<circle cx= "90" cy= "25" r= "20" /> 
</g> 
</svg> 


上 述 代码 中 ,使 用 svg 元 素 将 代码 直接 嵌入 HTML 代码 中 。svg 元 素 的 宽度 与 高 度 都 
是 100% ,表示 该 元 素 完全 充满 外 层 容 器 。 在 g 元 素 中 包含 四 个 circle 元 素 , 每 个 circle 元 
素 都 使 用 g 元 素 设 定 的 填充 样式 和 边线 样式 进行 绘制 ,关于 circle 元 素 将 在 后 续 小 节 中 讲 
解 。 代 码 运 行 结果 如 图 5-3 所 示 。 








JE 可 
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图 5-3 svg 和 g 元 素 


3. defs 元 素 
defs 元 素 多 用 来 定义 重复 使 用 的 元 素 。 由 于 处 于 定义 阶段 ,在 defs 元 素 中 所 定义 的 图 
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形 元 素 都 不 会 直接 显示 ; defs 元 素 中 的 子 元 素 在 文档 解析 时 不 会 被 泻 染 ,. 只 有 在 引用 时 
才 会 被 泻 染 。 使 用 defs 元 素 对 重复 使 用 的 元 素 进行 封装 ,可 以 有 效 地 提高 SVG 的 执行 
效率 。 

defs 元 素 与 g 元 素 非 常 相似 ,都 可 以 用 来 装载 多 个 子 元 素 , 唯 一 的 区 别 在 于 : g 元 素 中 
的 子 元 素 在 解析 时 会 被 立即 泻 染 ,而 defs 元 素 只 有 在 引用 时 才 被 泻 染 。 

【案例 S-7】 defs_element. html 


< svg width = "300" height = "180" viewBox= "0 0 200 180" 
xmlns = "http://www.w3.org/2000/svg"> 
<defs> 
< linearGradient id = "myGradient"> 
< stop offset ="20%" stop - color =" 井 C71585"/> 
< stop offset = "50% " stop - color =" 井 98FB98"/> 
< stop offset = "80%" stop - color =" 井 228B22"/> 
</linearGradient > 
</defs> 
<rect x="10" y= "10" width= "180" height = "40" fill = "url(#myGradient)"/> 
<circle cx= "100" cy= "120" r= "50" fill = "url( #myGradient)"/> 
</svg> 


上 述 代码 中 ,使 用 defs 元 素 定 义 了 一 个 linearGradient 渐变 元 素 , 然 后 在 rect 和 circle 
元 素 中 进行 引用 ,从 而 实现 渐变 矩形 和 渐变 圆 形 效果 ,如 图 5-4 所 示 。 
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图 5-4 defs 预定 义 元 素 ( 见 彩 插 ) 


4. symbol 元 素 

symbol 元 素 用 于 定义 一 个 图 形 模板 对 象 ,模板 本 身 不 会 泻 染 ,只 有 使 用 use 元 素 引用 
时 才能 呈现 。symbol 元 素 具 有 viewBox 和 preserveAspectRatio 属性 ,在 use 元 素 引 用 时 可 
以 对 矩形 视 区 进行 缩放 。 

5. use 元 素 

use 元 素 用 于 引用 SVG 中 已 定义 的 可 视 化 元 素 ,将 被 引用 的 元 素 内 容 复 制 一 份 到 当前 
位 置 。use 元 素 的 x、y、width 和 height 属性 用 来 设置 引用 元 素 在 给 定 坐 标 系 中 的 矩形 演 染 
区 域 的 位 置 ,xlink:href 属性 用 于 引用 特定 的 元 素 。 

下 述 代码 演示 了 symbol 和 use 元 素 的 用 法 。 
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【案例 5-8】 symbol_element. html 


< svg width = "200" height = "100" > 
<! -一 symbol 定义 时 不 会 被 浑 染 -一 > 
< symbol id = "mySymbol" viewBox = "0 0 140 140"> 
<circle cx= "50" cy= "70" r= "60" stroke 一 width= "8" 
stroke = "#EE0000" fill = "#EE7AE9"/> 
<circle cx= "100" cy= "70" r= "40" stroke 一 width= "8" 
stroke = "green" fill = "white"/> 
</symbol > 
<! -- 使 用 use 绘制 元 素 --> 
<use xlink:href ="#mySymbol" x= "10" y= "20" width = "50" height = "25"/> 
<use xlink:href ="#mySymbol" x= "40" y= "20" width= "76" height = "38"/> 
<use xlink:href ="#mySymbol" x= "80" y= "20" width= "100" height = "50"/> 
</svg> 


上 述 代 码 中 ,使 用 symbol 元 素 创 建 了 一 个 图 形 模板 对 象 mySymbol, 其 中 包含 两 个 圆 
形 , 并 使 用 指定 的 颜色 进行 填充 和 描 边 。 接 下 来 ,通过 use 元 素来 引用 mySymbol 模板 对 
象 , 并 绘制 了 三 幅 不 同 大 小 的 副本 ,效果 如 图 5-5 所 示 。 





加 | o 1270018020/8F A A |W 


ce@) 人 @) 


图 5-5 symbol 和 use 元 素 的 用 法 














5.4 SVG 形状 元 素 


在 SVG 中 常见 的 形状 元 素 有 和 矩形 (rect)、 圆 形 (circle) 椭圆 (ellipse) 、 线 段 (line) .折线 
(polyline) 和 多 边 形 (polygon) 等 元 素 。 

1. rect 元 素 

rect 元 素 是 SVG 的 一 个 基本 形状 ,用 于 创建 一 个 矩形 。 使 用 rect 元 素 绘制 矩形 时 , 需 
要 确定 矩形 的 左上 角 坐 标 、 宽 度 和 高 度 ,rect 元 素 的 属性 见 表 5-3。 


表 5-3 rect 元 素 的 属性 














属性 描 述 
于 表示 矩形 区 域 的 左上 角 的 x 轴 坐标 ,默认 为 0 
y 表示 和 矩 形 区域 的 左上 角 的 y 轴 坐 标 ,默认 为 0 
width 表示 和 矩形 区 域 的 宽度 ,默认 为 100% 
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续 表 
属性 描 述 
height 表示 和 矩形 区 域 的 高 度 ,默认 为 100% 
Ix 表示 和 矩形 区 域 的 圆 角 的 水 平 半径 
TY 表示 和 矩形 区 域 的 圆 角 的 垂直 半径 


下 述 代 码 演 示 了 使 用 rect 元 素来 绘制 普通 和 矩形 和 圆 角 和 矩形 。 
【案例 5-9】 rect. html 


< svg width = "200" height = "85"> 
<rect x= "10" y= "20" width= "50" height = "50" stroke = "green" 
stroke — width= "3" fill = "yellow"/> 
<rect x="70" y= "20" width= "50" height = "50" rx="15" ry="15" 
stroke = "green" stroke— width= "3" fill = "yellow"/> 
<rect x= "130" y= "20" width= "50" height = "50" rx="20" ry= "5" 
stroke = "green" stroke— width= "3" fill = "yellow"/> 
</svg> 


上 述 代 码 中 ,创建 了 三 个 和 矩形, 分别 使 用 绿色 描 边 和 黄色 填充 。 第 一 个 矩形 是 一 个 普通 
矩形 ; 第 二 个 矩形 是 一 个 圆 角 和 矩形, 圆 角 的 水 平 半 径 和 垂直 半径 均 为 15; 第 三 个 矩形 也 是 
一 个 圆 角 和 矩形 , 贺 角 的 水 平 半径 为 20、 垂 直 半径 为 5, 效 果 如 图 5-6 所 示 。 
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图 5-6 rect 矩形 





2. circle 元 素 
circle 元 素 是 SVG 的 一 个 基本 形状 ,用 于 创建 一 个 圆 形 。 使 用 circle 元 素 绘制 圆 形 时 ， 
需要 确定 圆心 的 坐标 和 半径 ,circle 元 素 的 属性 见 表 5-4。 


表 5-4 circle 元 素 的 属性 











属性 描 述 

cx 表示 圆心 在 用 户 坐标 系 中 的 X 坐标 值 
cy 表示 圆心 在 用 户 坐标 系 中 的 Y 坐标 值 
r 表示 圆 的 半径 





下 述 代 码 演 示 了 使 用 circle 元 素来 绘制 一 个 圆 脸 。 
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【案例 5-10】 circle. html 
< svg width = "160" height = "150"> 


<circle cx= "60" cy= "60" r="50" stroke= "green" stroke— width= "3" fill= "yellow"/> 
<circle cx= "60" cy= "45" r="10" stroke = "green" stroke— width= "3" fill= "yellow"/> 
<circle cx= "80" cy= "45" r= "10" stroke = "green" stroke— width= "3" fill= "yellow"/> 
<circle cx= "62" cy= "45" r= "4" stroke— width= "3" fill = "black"/> 

<circle cx= "78" cy= "45" r= "4" stroke 一 width= "3" fill= "black"/> 

<rect x= "56" y= "75" width= "30" height = "10" rx="20" ry= "5" stroke= "green" 

stroke— width= "3" fill = "yellow"/> 
</svg> 


上 述 代 码 中 ,使 用 五 个 圆 形 和 一 个 圆 角 和 矩形 来 绘制 一 个 圆 脸 。 在 circle 元 素 中 ,cx 和 
cy 属性 用 于 指定 圆 形 的 圆心 坐标 ,r 属性 用 于 指定 圆 的 半径 大 小 。 在 rect 元 素 中 ,rx 和 ry 
属性 分 别 表示 和 矩形 圆 角 的 水 平 半径 和 垂直 半径 。 代 码 运 行 结果 如 图 5-7 所 示 。 








图 5-7 circle 图 形 


3. ellipse 元 素 
ellipse 元 素 是 SVG 的 一 个 基本 形状 ,用 于 创建 一 个 椭圆 。 使 用 ellipse 元 素 绘制 椭圆 
时 ,需要 确定 椭圆 的 中 心 坐 标 、x 轴 半 径 和 y 轴 半 径 ,ellipse 元 素 的 属性 见 表 5-5。 


表 5-5 ellipse 元素 的 属性 

















属性 描 述 

cx 表示 椭圆 中 心 在 用 户 坐标 系 中 的 X 坐标 值 
cy 表示 椭圆 中 心 在 用 户 坐 标 系 中 的 Y 坐标 值 
rx 表示 椭圆 的 水 平 半径 

ry 表示 椭圆 的 垂直 半径 


下 述 代 码 演 示 了 使 用 ellipse 元 素来 绘制 椭圆 。 
【案例 5-11】 ellipse. html 


< svg width = "180" height = "120"> 
<rect x="18" y= "8" width= "144" height = "104" fill =" 井 FEFF00"”stroke=" 井 000"/> 
<ellipse cx= "90" cy= "60" rx="25" ry= "50" fill = "#EE7942" stroke= "#000"/> 
<ellipse cx= "90" cy= "60" rx="70" ry= "15" fill = "#00FF7F" stroke="#000"/> 
</svg> 
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上 述 代 码 中 ,绘制 了 一 个 矩形 和 两 个 椭圆 ,通过 cx 和 cy 属性 来 指定 椭圆 中 心 的 坐标 位 
置 ,rx 和 ry 属性 来 设置 椭圆 的 水 平 半径 和 垂直 半径 。 代 码 运 行 结果 如 图 5-8 所 示 。 
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5-8 ellipse 图 形 


4. line 元 素 
line 元 素 是 SVG 的 一 个 基本 形状 ,用 来 创建 一 条 连接 两 个 点 的 线段 。 使 用 line 元 素 绘 
制 线段 时 ,需要 提供 起 始点 和 结束 点 ,line 元素 的 属性 见 表 5-6 。 


表 5-6 line 元 素 的 属性 

















属性 描 述 

到 表示 线段 起 始点 的 X 坐标 值 
y1 表示 线段 起 始点 的 Y 坐标 值 
劲 表示 线段 结束 点 的 X 坐标 值 
y2 表示 线段 结束 点 的 Y 坐标 值 


上 述 SVG 的 基本 元 素 都 有 描 边 (stroke) 属 性 ,通过 描 边 属性 集 能 够 产生 一 系列 丰富 的 
图 形 边框 效果 。 描 边 属 性 集中 包括 stroke-width、 stroke-opacity、stroke-dasharray、 stroke- 
linecap 和 stroke-linejoin 属性 ,具体 见 表 5-7。 


表 5-7 stroke 描 边 属性 集 


























属 性 描 述 
stroke 用 于 设置 描 边 时 的 颜色 
stroke-width 用 于 设置 描 边 时 的 宽度 
stroke-opacity 用 于 设置 描 边 时 的 透明 度 
stroke-dasharray 用 于 设置 描 边 时 所 采用 的 线 型 
stroke-dashoffset 用 于 设置 描 边 时 绘制 图 案 的 偏 移 量 
stroke-linecap 用 于 设置 描 边 端 点 形状 
stroke-linejoin 当 描 边线 条 交叉 时 ,交叉 点 处 的 过 渡 形 状 , 取 值 范围 是 miter、round 和 bevel 


下 述 代码 演示 了 使 用 line 元 素来 绘制 线段 ,并 使 用 stroke 属性 集 进行 描 边 。 
【案例 5-12】 line. html 


< svg width = "310" height = "160"> 
<line x1 ="10" yl = "20" x2 = "300" y2="20" stroke= "#000" stroke— width= "3" 
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stroke - dasharray = "10 2"/> 


<line xl="10" yl = "40" x2 = "300" Y2 = "40" stroke= "#000" stroke 一 width= "3" 
stroke— dasharray = "10 2" stroke— dashoffset = "3"/> 

<line xl="10" yl = "60" x2= "300" y2= "60" stroke= "#000" stroke 一 width= "3" 
stroke— dasharray = "5 10"/> 

<line xl="10" yl = "80" x2= "300" y2= "80" stroke= "#000" stroke 一 width= "3" 
stroke— dasharray = "1 1"/> 

<line x1 = "10" yl = "100" x2= "300" y2= "100" stroke= "#000" stroke— width= "3" 
stroke — dasharray = "10"/> 

<line x1="10" yl = "120" x2 = "300" Y2 = "120" stroke= "#000" stroke— width= "3" 
stroke — opacity= "0.4"/> 

<line xl="10" yl = "140" x2= "300" Y2 = "140" stroke= "#0c0" stroke— width= "6" 
stroke — linecap = "round"/> 

</svg> 


上 述 代 码 中 ,先后 绘制 了 七 种 样式 的 线段 ,前 五 条 线段 均 为 虚线 条 ,第 六 条 为 半 透 明 线 
段 ,第 七 条 的 端点 为 圆 形 端点 。 代 码 运 行 结果 如 图 5-9 所 示 。 
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图 5-9 line 线条 


5. polyline 元 素 

polyline 元 素 也 是 SVG 中 的 一 个 基本 形状 ,使 用 一 系列 线段 来 连接 多 个 点 ,形成 一 条 
折线 。 首 先 确定 关键 点 的 坐标 ,然后 通过 关键 点 来 生成 一 条 折线 。polyline 元 素 只 有 一 个 
points 属性 ,该 属性 是 一 组 point 类 型 的 数据 集合 ,数据 之 间 使 用 逗号 (,) 隔 开 。 

下 述 代码 演示 了 使 用 polyline 元 素 绘制 一 条 折线 ,并 使 用 " #00EE76" 进 行 填充 。 

【案例 5-13】 polyline. html 


< svg width= "150" height = "100"> 
<polyline points = "30 70, 
40 70,40 40,50 40,50 70, 
60 70,60 20,70 20,70 70, 
80 70,80 10,90 10,90 70, 
100 70,100 90,110 90,110 70, 
120 70,120 30,130 30,130 70, 
140 70" 
fill = "#00EE76" stroke= "#000000"/> 
</svg> 
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上 述 代码 中 ,使 用 polyline 元 素 绘制 了 一 条 折线 ,该 元 素 的 points 属性 中 提供 了 22 个 坐标 
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6. polygon 元 素 

polygon 元 素 用 于 创建 一 个 闭合 多 边 形 ,由 一 组 首尾 相连 的 直线 线段 构成 ,最 后 一 点 与 
第 一 点 相连 接 从 而 形成 闭环 。 与 polyline 元 素 相似 ,polygon 元 素 也 具有 points 属性 ,该 属 
性 是 由 一 组 point 类 型 的 数据 集合 构成 ,数据 之 间 用 逗号 (,) 隔 开 。 

下 述 代码 演示 了 使 用 polygon 元 素来 绘制 封闭 图 形 。 

【案例 5-14】 polygon. html 


< svg xmlns = "http://www.w3.org/2000/svg" width = "240" height = "60"> 
< polygon points = "35 20,20 5, 5 20, 20 35" fill = "#0000CD"/> 
< polygon points = "20 7, 13 20, 20 34, 28 20" fill = "white"/> 
<circle cx= "60" cy= "20" r="15" fill="#CD0000"/> 
< polygon points = "60 7, 48 20, 60 32, 73 20" fill = "white"/> 
< polygon points = "100 5, 85 20, 100 35, 115 20" fill = "green"/> 
<circle cx= "100" cy= "20" r= "9" fill = "white"/> 
<circle cx= "140" cy= "20" r= "15" fill = "#EE7600"/> 
< polygon points = "140 5, 130 20, 140 35, 150 20" fill = "white"/> 
<circle cx= "180" cy= "20" r= "15" fill ="#EE1289"/> 
< polygon points = "180 5, 165 27, 195 27" fill = "white"/> 
<circle cx= "220" cy= "20" r= "15" fill= "#698B22"/> 
< polygon points = "210 10, 210 30, 230 30,230,10" fill= "white"/> 
</svg> 


上 述 代码 中 ,先后 绘制 了 六 组 图 形 , 第 一 组 图 形 由 两 个 polygon 元 素 组 合 而 成 ,其 他 五 
组 图 形 由 circle 和 polygon 元 素 组 合 而 成 。 代 码 运 行 结果 如 图 5-11 所 示 。 
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5-11 polygon 图 形 
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5.5 SVG 路 径 


路 径 (path) 元 素 是 SVG 中 一 种 非常 重要 的 元 素 , 前 面 所 讲述 的 基本 图 形 都 可 以 通过 
path 元 素 绘 制 出 来 。 基 本 图 形 是 一 种 相对 简单 的 图 形 , 而 路 径 元 素 能 够 更 加 灵活 地 绘 
制 一 些 规则 或 不 规则 的 圆 弧 和 曲线 。path 元 素 提 供 了 d 和 pathLength 两 个 属性 , 见 
表 5-8。 


表 5-8 ”path 元 素 的 属性 











属 性 描 述 
d 定义 一 组 路 径 数据 
pathLength 路 径 的 总 长 度 


其 中 ,属性 d 用 于 定义 一 组 路 径 数据 .数据 由 绘图 指令 和 坐标 数据 构成 。 绘 图 指令 包括 
Moveto、Lineto、Curvto、Arcto 和 ClosePath 指令 ,具体 如 下 。 

1， Moveto 指令 

Moveto 指令 用 于 从 指定 的 坐标 点 开始 绘制 一 条 新 的 子路 径 , 该 指令 分 为 M 和 m 指 
令 。M 指令 的 坐标 值 是 当前 用 户 坐 标 系 中 的 绝对 坐标 值 ,而 m 指令 的 坐标 值 是 相对 坐标 值 
(相对 当前 点 向 右 和 向 下 的 距离 )。 

2. Lineto 指令 

Lineto 指令 用 于 绘制 一 条 直线 段 ,该 指令 分 为 L 和 1 指令 。 与 Moveto 命令 相似 ， 
Lineto、Curvto、Arcto 和 ClosePath 指令 中 的 大 写 指令 的 坐标 都 是 绝对 坐标 值 , 而 小 写 指 令 
中 的 坐标 都 是 相对 坐标 值 。 

3. Curvto 指令 

Curvto 指令 用 于 绘制 一 条 贝 塞 尔 曲线 。 其 中 Q 和 q 指令 用 于 绘制 二 次 方 贝 塞 尔 曲线 ， 
而 C 和 *e 指令 用 于 绘制 三 次 方 贝 塞 尔 曲线 。 

4. Arcto 指令 

Arcto 指令 用 于 绘制 一 条 椭圆 弧 的 曲线 路 径 , 该 指令 分 为 A 和 a 指令 ,指令 的 语法 格式 
如 下 。 

【语法 】 


Arx,ry xAxisRotate largeArcFlag, sweepFlag x,y 


其 中 : 

。 参数 rx、ry 分 别 表示 x 轴 和 y 轴 方 向 的 半径 ; 

。 参数 xAxisRotate 表示 x 轴 与 水 平 轴 的 顺 时 针 夹 角 ; 

。 参数 largeArcFlag 用 于 设置 所 绘制 的 弧 线 是 小 角度 弧 线 还 是 大 角度 弧 线 , 当 参数 为 
0 时 表示 绘制 小 弧 , 当 参数 为 1 时 表示 绘制 大 弧 ; 

。 参数 sweepFlag 用 于 设置 是 顺 时 针 还 是 道 时 针 方 向 绘制 弧 线 , 当 参 数 为 0 时 表示 逆 
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时 针 方 向 , 当 参 数 为 1 时 表示 顺 时 针 方 向 ; 
。 参数 x 和 y 表示 目标 点 的 坐标 (x,y)。 
5. ClosePath 指令 
ClosePath 指令 用 于 将 当前 点 和 第 一 个 点 进行 连接 从 而 形成 闭环 ,该 指令 分 为 Z 和 z 
指令 。 
下 述 代码 演示 了 使 用 path 元 素 绘 制 彩 色 圆 饼 图 。 
【案例 5-15】 path. html 


< svg width= "300" height = "300" viewBox= "0 0 400 400"> 
< path d= "M200,200 L200, 20 A180,180 0 0,1 377,231 z" fill=" 井 ff0000"/> 
<path d= "M200, 200 L377, 231 A180,180 0 0,1 138,369 z" fill= "#00ff00"/> 
<path d= "M200,200 L138, 369 A180,180 0 0,1 20,194 z" fill= "#0000ff"/> 
<path d= "M200,200 L20,194 A180,180 0 0,1 75,71 z" fill = "#ff00ff"/> 
<path d= "M200,200 L75,71 A180,180 0 0,1 200,20 z" fill ="#ffff00"/> 
</svg> 


上 述 代 码 中 ,使 用 path 元 素 分 别 绘 制 了 五 个 扇形 ,在 path 元 素 的 d 属性 中 使 用 M 指令 


来 设置 扇形 的 开始 坐标 ,L 指令 用 于 从 开始 点 到 目标 点 绘制 一 条 线段 ,A 指令 则 通过 顺 时 针 
方向 绘制 一 条 弧 线 ,最 后 使 用 z 指令 来 形成 闭环 。 代 码 运行 结果 如 图 5-12 所 示 。 
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图 5-12 ”path 路 径 


5.6 SVG 样式 


与 HTML 基本 标签 相似 ,SVG 中 大 部 分 标签 都 能 够 设置 样式 。 对 SVG 中 的 元 素 设置 
样式 时 ,不同 的 元 素 所 使 用 的 参数 也 有 所 不 同 。SVG 样式 主要 分 为 以 下 几 种 类 型 : 字体 、 
文本 .媒体 裁剪 遮 畦 .渐变 、 滤 镜 、 交 互 和 绘图 等 样式 ,具体 见 表 5-9。 
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表 5-9 SVG 样式 类 型 
































































































































类 型 样 式 名 描 述 

font 用 于 设置 字体 的 样式 
font-family 用 于 设置 所 使 用 的 字体 名 称 
font-size 用 于 设置 字体 的 大 小 

字体 样式 | font-stretch 用 于 设置 字体 拉 伸 时 的 规则 
font-style 用 于 设置 字体 的 额外 样式 
font-variant 用 于 设置 字体 的 变 体 方式 
font-weight 用 于 设置 字体 的 是 否 粗 体 以 及 粗 体 方式 
direction 用 于 设置 文本 的 排列 方向 
letter-spacing 用 于 设置 文本 字母 之 间 的 间距 

文本 样式 | text-decoration 用 于 设置 文本 的 修饰 效果 
unicode-bidi 用 于 说 明文 本 使 用 的 Unicode 方式 
alignment-baseline | 用 于 设置 文本 的 基线 排列 方式 
clip 仅 能 用 于 最 外 层 的 SVG 元 素 ,用 于 说 明 裁 前 方式 
color 用 于 设置 颜色 

媒体 样式 | cursor 用 于 设置 鼠标 的 形状 
display 用 于 设置 元 素 是 否 可 见 
overflow 仅 限 于 创建 新 视 口 的 元 素 , 当 内 容 超过 可 见 区 域 时 如 何 处 理 溢出 部 分 
clip-path 用 于 设置 图 形 对 象 的 裁剪 路 径 

clip-rule 用 于 设置 图 形 对 象 的 裁剪 规则 

nd 用 于 设置 这 日 
opacity 用 于 设置 图 形 对 象 的 透明 度 
enable-background | 在 设置 滤 镜 时 ,是 否 考虑 背景 图 像 
filter 用 于 设置 具体 的 滤 参 数 

滤 饶 样式 flood-color 用 于 设置 填充 色彩 
flood-opacity 用 于 设置 填充 的 透明 度 

渐变 样式 stop-color 用 于 设置 色彩 渐变 的 起 止 颜色 
stop-opacity 用 于 设置 色彩 渐变 的 透明 度 

交互 参数 | pointer-events 用 于 设置 响应 事件 
color-interpolation | 用 于 设置 颜色 的 插 补 与 合成 方式 
color-rendering 用 于 设置 颜色 的 泻 染 方式 
fill 用 于 设置 填充 方式 
fill-opacity 用 于 设置 填充 的 透明 度 
image-rendering 用 于 设置 图 像 泻 染 时 的 规则 
marker 用 于 引用 箭头 标记 
marker-end 用 于 在 路 径 终点 引用 一 个 箭头 标记 
marker-mid 用 于 在 路 径 中 点 引用 一 个 箭头 标记 
marker-start 用 于 在 路 径 起 点 引用 一 个 箭头 标记 

绘图 样式 | shape-rendering 用 于 设置 图 形 的 演 染 规则 
Stroke 用 于 设置 图 形 的 描 边 方式 
stroke-dasharray 用 于 设置 描 边 时 所 采用 的 线 型 
stroke-dashoffset ”| 用 于 设置 描 边 时 线 型 的 偏 移 量 
stroke-linecap 用 于 设置 路 径 线 条 端点 的 绘制 样式 





stroke-linejoin 


用 于 设置 线条 交叉 时 交点 处 的 过 渡 形 状 





stroke-miterlimit 


用 于 设置 路 径 端 点 是 miter 时 的 大 小 限制 

















stroke-opacity 用 于 设置 描 边线 条 的 透明 度 
stroke-width 用 于 设置 描 边线 条 的 宽度 
stroke-rendering 用 于 设置 描 边 时 的 泻 染 规则 
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5.6.1 SVG 元 素 使 用 样式 


在 HTML 页 面 中 ,可 以 通过 以 下 三 种 形式 为 SVG 元 素 设 置 样式 。 

1. 使 用 直接 属性 

通过 SVG 元 素 所 提供 的 样式 属性 (如 stroke-width 等 ) 来 添加 样式 ,此 种 方式 虽然 比较 
灵活 ,但 容易 与 style 属性 混淆 。 

【案例 5-16】 attribute_style. html 


< svg width= "300" height = "150"> 
<circle cx= "80" cy= "80" r= "60" stroke— width= "4" stroke="#A020F0" 
stroke - dasharray = "8,6" fill = "#A2CD5A"/> 
<circle cx= "150" cy= "80" r ="60" fill- opacity = "0.8" fill = "#FFFFFF" 
stroke - opacity = "0.9" stroke— width= "4" stroke= "#551A8B"/> 
</svg> 


上 述 代 码 中 ,使 用 样式 属性 为 circle 元 素 设置 撒 边 效果 和 填充 效果 ,其 中 使 用 stroke、 
stroke-width stroke-opacity 和 stroke-dasharray 属性 来 设置 描 边 样式 ,使 用 fill 和 fill- 
opacity 属性 来 设置 填充 样式 。 代 码 运行 结果 如 图 5-13 所 示 。 
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图 5-13 使 用 属性 设置 样式 


2. 使 用 style 属性 

可 以 通过 行内 样式 ( 即 style 属性 ) 来 设置 SVG 元 素 的 样式 ,在 style 样式 中 ,属性 和 属 
性 值 之 间 用 冒号 (: ) 隔 开 ,各 个 属性 之 间 使 用 分 号 (; ) 隔 开 。 

【案例 S-17】 inline_style. html 


< svg width = "300" height = "150"> 
<circle cx= "80" cy= "80" r= "60" style= "stroke: #A020F0;stroke— width:4; 
stroke— dasharray:8,6;fill: #A2CD5A;"/> 
<circle cx= "150" cy= "80" r= "60" style = "fill:#FFFFFF;fill ~ opacity:0.8; 
stroke: #551A8B; stroke — width:4; stroke — opacity:0.9;"/> 
</svg> 


上 述 代 码 中 ,使 用 style 属性 来 设置 circle 元 素 的 描 边 样式 和 填充 样式 。 代 码 运行 结果 
如 图 5-13 所 示 。 

3. 使 用 class 属性 

与 HTML 元 素 相似 ,可 以 通过 外 部 样式 或 内 部 样式 来 定义 类 样式 ,然后 在 SVG 元 素 
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中 使 用 class 属性 引用 所 定义 的 样式 。 
【案例 5-18】 class_style. html 





<style type= "text/css"> 
.leftCircle{ 
stroke: # A020F0; 
Stroke 一 width:47 
Stroke 一 dasharray:8,6; 
fill: #A2CD5A; 


.rightCircle{ 
fil1: #FFFFFF; 
fill ~ opacity:0.8; 
stroke: # 551A8B; 
stroke — width:4; 
stroke — opacity:0.9; 

} 

</style> 


< svg width = "300" height = "150"> 
<circle cx="80" cy= "80" r= "60" class = "leftCircle"/> 
<circle cx= "150" cy= "80" r= "60" class = "rightCircle"/> 
</svg> 


上 述 代 码 中 ,在 内 部 样式 中 定义 了 leftCircle 和 rightCircle 两 种 类 样式 ,然后 在 circle 
元 素 中 通过 class 属性 来 引用 所 定义 的 样式 ,为 circle 元 素 设 置 描 边 样式 和 填充 样式 。 代 码 
运行 结果 如 图 5-13 所 示 。 


5.6.2 SVG 文件 引用 样式 


SVG 继承 了 XML 的 样式 风格 ,允许 使 用 内 部 样式 或 外 部 样式 来 引用 样式 ,详细 用 法 
读者 可 以 参照 XML 中 样式 的 使 用 。 内 部 样式 是 指 在 SVG 文件 中 通过 style 元 素来 定义 样 
式 。 下 述 代码 演示 了 使 用 内 部 样式 来 为 SVG 元 素 设置 样式 。 

【案例 5-19】 class_style. svg 


<?xml version= "1.0" standalone = "no"?> 
<! DOCTYPE svg PUBLIC " - //W3C//DTD SVG 1.1//EN" 
"http://www. w3. org/Graphics/SVG/1. 1/DTD/svgl1. dtd"> 
< svg width = "300" height = "150" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> 
< style type = "text/css"> 
<![CDATA[ 
.leftCircle{ 
stroke: # A020F0; 
stroke— width:4; 
stroke— dasharray:8,6; 
fil1: # A2CD5A; 
} 
.rightCircle{ 
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fil1: # FFFFFE; 
fill ~ opacity:0.8; 
stroke: # 551A8B; 
Stroke 一 width:47 
stroke— opacity:0.9; 
} 
]]> 
</style> 
<circle cx= "80" cy= "80" r= "60" class = "leftCircle"/> 
<circle cx= "150" cy= "80" r= "60" class = "rightCircle"/> 
</svg> 


上 述 代 码 中 ,SVG 作为 一 个 独立 的 文件 ,使 用 CSS 样式 时 需要 预先 定义 ,在 style 元 素 
中 定义 了 leftCircle 和 rightCircle 两 种 类 样式 ,然后 在 circle 元 素 中 通过 class 属性 引用 所 
定义 的 样式 。<! [CDATA[ … ]]> 标 签 的 作用 是 : 当 浏 览 器 能 够 解析 CDATA 数据 时 将 正 
常 解析 该 数据 , 当 浏 览 器 不 能 解析 CDATA 数据 时 将 忽略 对 该 数据 的 解析 。 

外 部 样式 是 指 在 外 部 样式 文件 中 定义 样式 ,然后 在 SVG 文件 中 通过 <? xml-stylesheet? > 
标签 来 引入 外 部 样式 文件 。 首 先 , 在 外 部 样式 文件 中 定义 样式 ,代码 如 下 所 示 。 

【案例 5-20】 svg_styles. css 


@charset "utf — 8"; 
svgf 
border: 1px solid # A4A4A4; 
border - radius: 5px; 
box - shadow: 1px 2px #555555; 
background - color: lightgoldenrodyellow; 
.leftCircle{ 
stroke: # A020F0; 
stroke — width:4; 
stroke — dasharray:8,6; 
fil1: # A2CD5A; 
ji 
.rightCircle{ 
£ill: # FFFFFF; 
fill ~ opacity:0.8; 
stroke: # 551A8B; 
stroke — width:4; 
stroke — opacity:0.9; 
} 


接 下 来 ,在 SVG 文件 中 使 用 <? xml-stylesheet? > 来 引入 外 部 样式 文件 ,代码 如 下 所 示 。 
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【案例 5-21】 outer_class_style. svg 


<?xml version= "1.0" standalone = "no"?> 

<?xml - stylesheet href = "css/svg_styles. css" type = "text/css" ?> 

<! DOCTYPE svg PUBLIC " - //W3C//DTD SVG 1.1//EN" 
"http://www. w3. org/Graphics/SVG/1.1/DTD/svgl1. dtd"> 

< svg width = "300" height = "150" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> 
<circle cx= "80" cy= "80" r= "60" class= "leftCircle"/> 
<circle cx= "150" cy= "80" r= "60" class = "rightCircle"/> 

</svg> 


上 述 代 码 中 ,在 引入 外 部 样式 文件 svg_styles. css 之 后 ,在 circle 元 素 中 就 可 以 使 用 
class 属性 来 引用 外 部 文件 中 所 定义 的 样式 。 


5.7 文本 内 容 


与 传统 的 点 阵 图 不 同 ,SVG 中 可 以 嵌入 具有 图 像 效 果 的 文本 ,文本 可 以 按照 不 同 国家 
的 书写 习惯 进行 排列 ,如 从 上 到 下 .从 右 到 左 等 形式 。 文 本 内 容 的 操作 比较 灵活 ,可 以 实现 
选择 、 复 制 和 粘贴 等 操作 ,结合 SVG 的 交互 性 还 可 以 实现 文本 内 容 以 及 样式 的 动态 修改 。 
SVG 中 的 文本 内 容 能 够 作为 图 像 的 主题 被 搜索 引擎 收录 ,这 也 是 其 他 格式 的 图 片 无 法 实现 
的 功能 。 

在 SVG 中 可 以 使 用 text、tspan 和 textPath 等 元 素来 描述 文本 ,其 中 text 元 素 用 来 定 
义 一 个 由 文字 组 成 的 图 形 ,该 元 素 的 属性 见 表 5-10。 

表 5-10 text 元 素 的 属性 




















属 性 描 述 

x 在 用 户 坐 标 系统 中 的 x 轴 坐 标 ,默认 为 0 

y 在 用 户 坐 标 系统 中 的 y 轴 坐 标 , 默 认为 0 

dx 表示 该 元 素 或 其 内 容 在 x 轴 方向 上 的 偏 移 量 

dy 表示 该 元 素 或 其 内 容 在 y 轴 方向 上 的 偏 移 量 

text-anchor 用 来 描述 文本 域 所 给 点 的 对 齐 方式 , 取 值 范围 为 start | middle | end | inherit 


文本 内 容 可 以 直接 嵌入 text 元 素 中 ,在 text 元 素 中 还 可 以 使 用 tspan 元 素 进行 局 部 标 
注 ,以 实现 局 部 内 容 的 文本 调整 .字体 设置 和 位 置 定位 ,tspan 元 素 的 属性 与 text 元 素 的 属 
性 基本 相同 。 

【案例 5-22】 text. html 


< style type= "text/css"> 
.textClass{ 
font - family:Times; 
font — size:35pt; 
stroke: # 0000ff; 
stroke — width:2px; 
fill: #00ff00; 
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} 
tspan{ 
fill:red; 
font — weight :bold; 
stroke — width:0; 
上 
</style> 
< svg width= "500" height = "150"> 
<text x= "30" y= "80" class = "textClass"> 
欢迎 来 到 <tspan > 布谷 鸟 </tspan > 直播 平台 ! 
</text > 
</svg> 


上 述 代码 中 ,通过 text 元 素来 绘制 文本 ,在 文本 中 使 用 tspan 元 素来 重点 强调 文本 的 局 
部 内 容 。 代 码 运 行 结果 如 图 5-14 所 示 。 











Q | @ 127.00.18020/ 齐 五 源 /chapter05/texthtml 


欢迎 来 到 布谷 乌 直 播 平 台 ! 





图 5-14 text 元 素 


SVG 中 的 文本 能 够 按照 曲线 路 径 进行 排列 。 当 实现 文本 曲线 路 径 排 列 时 ,首先 使 用 
path 元 素来 定义 一 个 曲线 路 径 ,然后 在 text 元 素 中 使 用 textPath 子 元 素来 设置 文本 的 曲线 
路 径 。 

【案例 5-23】 textPath. html 


< svg width = "520" height = "200"> 
< defs> 
< path id = "MyPath" 
d="M 30 100C50 50 100 20 200 80 
C 300 160 400 10 500 100 " /> 
</defs> 
<text x= "30"Y= "150" class = "baseClass textClass"> 
欢迎 来 到 < tspan > 布谷 鸟 </tspan > 直播 平台 ! 
</text> 
<text x= "30" y= "200" class = "baseClass"> 
< textPath xlink:href = " 井 MYPath"> 生 活 笑 话 不断 , 今 晚 8 点 不 见 不 散 .</textPath> 
</text> 
<use xlink:href ="#MyPath" stroke= "black" stroke 一 opacity= "0.6" 
fill— opacity= "0"></use> 
</svg> 
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上 述 代码 中 ,在 defs 元 素 中 预定 义 了 一 个 M 型 的 曲线 路 径 ,通过 textPath 元 素 的 
xlink:href 属性 来 设置 文本 的 绘制 路 径 。 代 码 运行 结果 如 图 5-15 所 示 。 








© [© 127.001.8020/ 齐 天 B/chapter05/textPathhtm 全 | W 


于 aas 











欢迎 来 到 布谷 鸟 直播 平台 ! 
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5.8 渐变 填充 


颜色 渐变 是 指 各 种 颜色 之 间 的 光滑 过 渡 , 使 用 颜色 渐变 时 需要 先 定义 渐变 模式 ,然后 在 
元 素 中 引用 所 定义 的 渐变 模式 即 可 。 颜 色 渐变 包括 线性 渐变 (linearGradient) 和 径 向 渐变 
(radialGradient) 。 

1. 线性 渐变 

线性 渐变 是 指 颜色 沿 着 直线 方向 的 渐变 过 渡 。 在 SVG 中 ,一 般 在 defs 元 素 的 内 部 使 
用 linearGradient 元 素来 定义 线性 渐变 模式 ,每 个 模式 都 有 一 个 id 标识 ,以 便 其 他 元 素 引 
用 。linearGradient 元 素 的 属性 见 表 5-11。 


表 5-11 linearGradient 元 素 的 属性 

















属 性 描 述 
id 用 于 定义 linearGradient 元 素 的 标识 ,其 他 元 素 通过 id 来 引用 
xl 用 于 指明 线性 渐变 模式 起 点 的 X 坐标 ,默认 为 0 
y1 用 于 指明 线性 渐变 模式 起 点 的 Y 坐标 ,默认 为 0 
x2 用 于 指明 线性 渐变 模式 终点 的 X 坐标 ,默认 为 100% 
y2 用 于 指明 线性 渐变 模式 终点 的 Y 坐标 ,默认 为 0 





用 于 设置 x1、yl、x2 和 y2 坐标 值 的 长 度 单位 , 取 值 范围 为 userSpaceOnuse 或 
objectBoundingBox。 当 gradientUnits 为 userSpaceOnuse 时 ,说 明 长 度 单位 取决 于 
linearGradient 元 素 所 在 的 用 户 坐 标 系 ; 当 gradientUnits 为 objectBoundingBox 时 ， 
说 明 长 度 单位 使 用 当前 渐变 的 图 形 对 象 的 矩形 外 框 为 参考 坐标 系 

当 渐 变 模 式 的 定义 区 域 小 于 引用 元 素 的 区 域 时 ,所 超出 部 分 的 处 理 方法 ; pad 表示 
纯色 填充 ,reflect 表示 使 用 镜像 重复 填充 ,repeat 表示 直接 重复 填充 

xlink: href 使 用 该 属性 引用 另外 一 个 已 经 定义 好 的 渐变 模式 

gradientTransform | 用 于 指明 渐变 模式 所 采用 的 坐标 变换 方法 


gradientUnits 





spreadMethod 











在 创建 线性 渐变 模式 时 ,需要 使 用 stop 元 素来 设置 颜色 关键 点 的 色彩 和 位 置 ,通过 关 
键 点 形成 色彩 渐变 。stop 元 素 的 属性 见 表 5-12。 
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表 5-12 stop 元素 的 属性 


属 性 描 述 
stop-color 用 于 设置 关键 点 的 颜色 值 , 默 认为 黑色 
stop-opacity | 用 于 设置 关键 点 的 透明 度 , 取 值 范围 为 0( 透 明 ) 一 1( 不 透明 ) 


et 用 于 指明 linearGradient 或 radialGradient 中 stop 元 素 在 渐变 模式 上 的 位 置 ,0 表示 模式 的 
oe 起 点 ,100% 表 示 模 式 的 终点 














下 述 代 码 演 示 了 使 用 linearGradient 和 stop 元 素 创 建 一 个 线性 渐变 模式 。 
【案例 5-24】 linearGradient. html 


< svg width = "350" height = "150"> 
<defs> 
< linearGradient id = "myGradient"> 
< stop offset ="5%" stop— color ="#F60"/> 
< stop offset ="50%" stop— color =" 井 0E0"/> 
< stop offset ="95%" stop— color="#FF6"/> 
</linearGradient > 
</defs> 
<rect fill = "url(#myGradient)" stroke= "black" stroke— width= "1" 
x="20" y= "30" width = "300" height = "60"/> 
</svg> 


上 述 代 码 中 ,在 defs 元 素 中 定义 了 一 个 线性 渐变 模式 myGradient, 然 后 在 rect 元 素 的 f1 
属性 中 使 用 url(# myGradient) 形 式 来 引用 所 定义 的 渐变 模式 。 代 码 运行 结果 如 图 5-16 所 示 。 





LEJLIEIGT 3 


站 linearGradient 线 性 渐 这 x 
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2. 径 向 渐变 

径 向 渐变 又 称 放射 性 渐变 ,是 指 沿 着 两 个 圆心 的 方向 向 外 逐渐 扩散 的 渐变 过 渡 。 在 
SVG 中 ,一般 在 defs 元 素 的 内 部 使 用 radialGradient 元 素来 定义 径 向 渐变 模式 ,每 个 模式 
都 有 一 个 id 标识 ,以 便 其 他 元 素 引 用 。radialGradient 元 素 的 属性 见 表 5-13。 

表 5-13 radialGradient 元 素 的 属性 
描 述 

用 于 定义 radialGradient 元 素 的 标识 ,其 他 元 素 通过 id 来 引用 


用 于 指明 径 向 渐变 模式 内 圆 ( 即 中 心 ) 的 X 坐标 ,默认 为 50% 
cy 用 于 指明 径 向 渐变 模式 内 圆 ( 即 中 心 ) 的 了 坐标 ,默认 为 50% 
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续 表 
属 性 描 述 





kx 用 于 指明 径 向 渐变 模式 外 圆 圆 心 的 X 坐标 ,默认 为 cx 











fy 用 于 指明 径 向 渐变 模式 外 圆 圆心 的 Y 坐标 ,默认 为 cy 





r 用 于 设置 渐变 圆 的 半径 ,默认 为 50% 





用 于 设置 cx、cy、fx 和 fy 坐标 值 的 长 度 单位 , 取 值 范围 为 userSpaceOnuse 或 
objectBoundingBox。 当 gradientUnits 为 userSpaceOnuse 时 ,说 明 长 度 单位 取决 于 
radialGradient 元 素 所 在 的 用 户 坐 标 系 ; 当 gradientUnits 为 objectBoundingBox 时 ， 
说 明 长 度 单位 使 用 当前 渐变 的 图 形 对 象 的 矩形 外 框 为 参考 坐标 系 

当 渐变 模式 的 定义 区 域 小 于 引用 元 素 的 区 域 时 ,所 超出 的 部 分 的 处 理 方法 ; pad 表 
示 纯 色 填 充 ,reflect 表示 使 用 镜像 重复 填充 ,repeat 表示 直接 重复 填充 

xlink: href 使 用 该 属性 引用 另外 一 个 已 经 定义 好 的 渐变 模式 

gradientTransform | 用 于 指明 渐变 模式 所 采用 的 坐标 变换 方法 


gradientUnits 





spreadMethod 











下 述 代码 演示 了 使 用 radialGradient 和 stop 元 素来 创建 一 个 径 向 渐变 模式 。 
【案例 5-25】 radialGradient. html 


< svg width = "360" height = "150"> 
<defs> 
<radialGradient id = "myGradient" cx= "0%"cy="0%"r="100% "> 
< stop offset ="0%" style= "stop— color: #8E388E;"/> 
< stop offset ="60%" style="stop— color: #FFFF00;"/> 
< stop offset ="100%" style = "stop - color:#FFAS500;"/> 
</radialGradient > 
< radialGradient id= "padded" xlink:href = "#myGradient" 
spreadMethod = "pad" /> 
< radialGradient id = "repeated" xlink:href ="#myGradient" 
spreadMethod = "repeat"/> 
< radialGradient id = "reflected" xlink:href ="#myGradient" 
spreadMethod = "reflect"/> 
</defs> 
<rect x= "20" y= "20" width= "100" height = "100" 
style= "fill:url( #padded); stroke:black;"/> 
<rect x= "130" y= "20" width= "100" height = "100" 
style = "fill:url( # repeated) ; stroke:black;"/> 
<rect x= "240" y= "20" width= "100" height = "100" 
style= "fill:url(#reflected); stroke:black;"/> 
</svg> 


上 述 代 码 中 ,在 defs 元 素 中 定义 了 一 个 径 向 渐变 模式 myGradient, 然 后 在 myGradient 
模式 基础 上 又 定义 了 pad、repeat 和 reflect 三 种 平 铺 形式 的 渐变 模式 ,最 后 绘制 了 三 个 正方 
形 , 分 别 引 用 上 述 三 种 径 向 渐变 模式 。 代 码 运行 结果 如 图 5-17 所 示 。 
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5.9 滤 镜 元 素 


滤 镜 效果 是 一 种 比较 复杂 的 效果 ,通过 混合 模式 、 光 源 设置 ,立体 变换 等 形式 来 实现 图 
形 的 绚丽 效果 。SVG 不 仅 能 够 泻 染 2D 效果 ,还 能 泻 染 出 3D 的 影像 效果 ,但 在 泻 染 绚丽 效 
果 的 同时 ,需要 消耗 一 定 的 系统 资源 ,在 实际 应 用 中 根据 需要 来 权衡 是 否 使 用 滤 镜 效果 。 

SVG 提供 了 一 些 基本 的 滤 镜 变换 元 素 , 如 光照 、 偏 移 、 高 斯 模糊 、 色 彩 变换 等 ,具体 见 








表 5-14。 
表 5-14 ” 滤 镜 变换 元 素 
滤 镜 描述 
feBlend 将 两 个 对 象 组 合 在 一 起 ,使 其 受 特定 的 混合 模式 控制 
feColorMatrix 该 滤 镜 基于 转换 矩阵 对 颜色 进行 变换 





feComponentTransfer 


修改 每 个 像素 的 颜色 ,将 其 Red、Green、Blue 和 Alpha 通道 变 成 子 元 素 feFuncR、 
feFuncB、feFuncG 和 feFuncA 并 返回 





feComposite 


该 滤 镜 用 于 执行 两 个 输入 图 像 的 智能 像素 组 合 ,在 图 像 空间 中 使 用 over、in、atop 
或 xor 合 成 操作 





feConvolveMatrix 


和 矩阵 卷 积 滤 镜 效果 ,在 输入 图 像 中 把 像素 与 邻近 像素 组 合 起 来 制作 出 结果 图 像 





feDiffuseLighting 


滤 镜 光照 效果 ,使 用 alpha 通道 作为 隆起 映射 





feDisplacement Map 


映射 置换 滤 镜 ,该 滤 镜 将 图 像 从 in2 到 空间 的 像素 值 置换 为 图 像 从 in 到 空间 的 
像素 值 





feFlood 


该 滤 镜 使 用 flood-color 元 素 定义 的 颜色 ,flood-opacity 元 素 定义 的 不 透明 度 , 来 
填充 滤 镜 区 域 





feGaussianBlur 


该 滤 镜 对 输入 图 像 进 行 高 斯 模糊 





该 滤 镜 从 外 部 来 源 取得 图 像 数 据 ,并 以 像素 数据 形式 输出 ,可 以 对 SVG 图 形 进 








feImage 行 栅 格 化 
feMerge 创建 一 个 滤 镜 释 加 效果 ,可 以 包含 一 个 或 多 个 子 滤 镜 
feMergeNode feMergeNode 是 feMerge 的 子 滤 镜 ,用 于 在 feMerge 滤 镜 中 全 加 其 他 滤 镜 效果 





feOffset 


将 图 像 作为 一 个 整体 ,提供 dx 和 dy 属性 对 其 进行 偏 移 





feSpecularLighting 


该 滤 镜 照 亮 一 个 原 图 形 ,使 用 alpha 通道 作为 隆起 映射 ; 该 光照 计算 遵守 标准 冯 
氏 照 明 模式 , 且 光 照 计算 的 结果 是 又 加 的 





feTile 


使 用 平 铺 方式 来 填充 目标 





feTurbulence 





该 滤 镜 利用 Perlin 噪声 函数 创建 了 一 个 图 像 ,如 云 纹 、 大 理 石 纹 等 效果 
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下 述 代 码 演 示 了 使 用 feGaussianBlur、 feOffset、 feSpecularLighting、feComposite 和 
feMerge 滤 镜 来 实现 3D 演 染 效果 。 
【案例 5-26】 filter. html 


< svg width = "400" height = "240" viewBox= "0 0 200 120"> 
<defs> 


<filter id= "myFilter" filterUnits = "userSpaceOnUse" x= "0" 





0 S 2 
width = "200" height = "120"> 案例 视频 讲解 
< feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur"/> 
<feOffset in= "blur" dx= "4" dy= "4" result = 
"offsetBlur"/> 
< feSpecularLighting in = "blur" surfaceScale= "5" 
specularConstant = ".75" specularExponent = "20" 
lighting - color = "#bbbbbb" result = "specOut"> 
< fePointLight x= "10" y="—10" z="200"/> 
</feSpecularLighting> 
< feComposite in = "specOut" in2 = "SourceAlpha" operator = "in" 
result = "specOut"/> 
< feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" 
kl = "0" k2="1" k3="1" k4="0" result = "litPaint"/> 
<feMerge> 
< feMergeNode in = "offsetBlur"/> 
< feMergeNode in = "litPaint"/> 
</feMerge> 
</filter> 
</defs> 
<gfilter = "url(#myFilter)"> 
< 
<path fill = "none" stroke = " 井 D90000" stroke 一 width= "10" 
d= "M50,90 C0,90 0,30 50,30 L150,30 C200, 30 200,90 150,90 z"/> 
< path fill = "#87CEEB" 
d= "M60,80 C30,80 30,40 60,40 L140, 40 C170, 40 170,80 140,80 z"/> 
<g fill="#FFFFFF" stroke= "black" font — size= "20" font - family= "楷体 "> 
<text x= "50" y= "67"> 布 谷 鸟 直播 </text > 
</g> 
</g> 
</g> 
</svg> 


上 述 代 码 中 ,在 filter 元 素 中 使 用 feGaussianBlur、 feOffset、 feSpecularLighting、 
feComposite 和 feMerge 滤 镜 来 合成 一 个 3D 滤 镜 效果 后 在 g 元 素 中 通过 filter 二 "url 
( 井 myFilter)" 属 性 来 引用 所 定义 的 滤 镜 。 代 码 运行 结果 如 图 5-18 所 示 。 
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5-18 filter 滤 镜 3D 效果 





5.10 动画 与 事件 响应 


上 述 几 节 中 所 介绍 的 SVG 都 是 静态 效果 ,而 SVG 最 显著 的 特点 是 动画 效果 。SVG 除 
了 具有 矢量 特征 之 外 ,还 可 以 让 开发 者 轻松 制作 各 种 动画 效果 。SVG 动画 的 实现 方式 有 
SMIL 方式 和 SVG DOM 编程 两 种 ,此 处 重点 介绍 SMIL 方式 。 

SVG 动画 是 一 种 基于 SMIL(Synchronized Multimedia Integration Language, 同 步 多 
媒体 集成 语言 ) 的 动画 。 为 了 实现 动画 效果 ,SVG 中 提供 了 animate、animateMotion 等 元 
素 , 具 体 见 表 5-15。 








表 5-15 动画 元 素 
动画 元 素 描 述 
ve 动画 元 素 位 于 该 形状 元 素 的 内 部 ,使 用 该 元 素 的 属性 来 指定 动画 的 持续 时 间 和 变 
化 范围 
animateColor 用 于 指定 颜色 的 变换 过 程 ,目前 各 浏览 器 暂 不 支持 该 属性 





animateMotion 用 于 指定 元 素 沿 着 某 一 路 径 进行 移动 
animateTransform | 用 来 设置 元 素 坐 标 变化 时 的 动画 效果 
Set 用 来 设 定 一 个 属性 值 ,并 为 该 值 赋予 一 个 持续 时 间 











下 述 代 码 演示 了 如 何 实现 SVG 动画 效果 。 
【案例 5-27】 animate. html 


< svg width = "400" height = "300" xmlns = "http://www.w3.org/2000/svg"> 
< path stroke = "#FF4444" d= "M10,45 L400,45"></path> 
<rect x= "10"Y= "20" width= "50" height = "50" class = "baseClass"> 2 
<aninate attributeNane = "x" from="— 50" to="300" 加 ve 
dur = "5s" repeatCount = "indefinite"/> 案例 视频 讲解 





</rect> 
<path stroke= "#FF4444" d= "M10,10 L150,200 200,100 LA00, 300" 
id= "theMotionPath"></path> 
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<circle r="30" class= "baseClass"> 
<animateMotion dur = "6s" repeatCount = "indefinite"> 
< mpath xlink:href =" 井 theMotionPath" /> 
</animateMotion> 
< set attributeName = "fill" to= "red" dur = "3s"></set> 
</circle> 
<ellipse cx= "80" cy= "220" rx= "25" ry= "50" class = "baseClass"> 
<animateTransform attributeName = "transform" type = "rotate" dur = "5s" 
from= "0 80 220" to= "360 80 220" repeatCount = "indefinite"/> 
</ellipse> 
</svg> 


上 述 代码 中 ,分 别 定义 了 矩形、. 圆 形 和 椭圆 形 ,使 用 animate 元 素 控制 矩形 ,使 其 从 左 向 
右 沿 着 水 平 线 逐 步 移动 ; 使 用 animateMotion 元 素 控 制 圆 形 , 使 其 沿 着 指定 的 路 径 进 行 运 
动 , 在 前 3s 使 用 红色 填充 ,3s 之 后 恢复 初始 颜色 (黄色 ) 填 充 ; 使 用 animateTransform 元 素 
控制 椭圆 ,使 其 在 原 地 沿 着 顺 时 针 方 向 旋转 。 代 码 运行 结果 如 图 5-19 所 示 。 
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图 5-19 SVG 动画 


与 HTML 元 素 一 样 ,SVG 元 素 也 能 对 键盘 .鼠标 事件 进行 响应 ,可 以 通过 元 素 的 
onmouseover 等 属性 来 绑 定 事件 处 理 方法 ,也 可 以 通过 JavaScript 脚本 动态 绑 定 事件 的 处 
理 方 法 。 下 述 代 码 演示 了 SVG 元 素 的 鼠标 事件 响应 过 程 。 

【案例 5-28】 pathAction. html 


< svg width = "400" height = "400" style = "cursor:hand; "> 
< defs> 
< filter id = "blurFilter"> 
< feGaussianBlur in = "SourceGraphic" stdDeviation = "10"/> 
</filter> 
</defs> 
<path d= "M200,200 L200, 20 A180,180 0 0,1 377,231 z" fill= 
"#ff0000"/> 
<path d= "M200,200 L377,231 A180,180 0 0,1 138,369 z" fill= 
"#00ff00"/> 
<path d= "M200, 200 L138, 369 A180,180 0 0,1 20,194 z" fill= "#0000ff"/> 
<path d= "M200, 200 L20,194 A180,180 0 0,1 75,71 z" fill= "#ff00ff"/> 
<path d= "M200, 200 L75,71 A180,180 0 0,1 200,20 z" fill = "#ffff00"/> 





案例 视频 讲解 
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<circle cx= "200" cy= "200" r= "20" fill = "#FFF8DC" 
onmouseover = "overCircle(this)" onmouseout = "outCircle(this)"/> 
</svg> 
<script> 
Var paths = document. getElementsBYTagName("path" ) ; 
for(item in paths){ 
console. log( item); 
paths[ item]. onmouseover = function(){ 
this. style. strokeWidth = 6; 
this. setAttribute("filter", "url(#blurFilter)"); 
}; 
paths[ item]. onmouseout = function(){ 
this. style. strokeWidth= 2; 
this. setAttribute("filter", ""); 
}; 
} 
function overCircle(object){ 
object. setAttribute("r", 30); 
function outCircle(object){ 
object. setAttribute("r",20); 
} 


</script > 


上 述 代 码 中 ,演示 了 通过 onmouseout、onmouseover 属性 为 circle 元 素 绑 定 鼠标 滑 和 信和 
滑 出 事件 的 处 理 方法 ,演示 了 通过 JavaScript 动态 地 为 path 元 素 绑 定 鼠标 滑 入 和 滑 出 事件 
的 处 理 方法 。 代 码 运行 结果 如 图 5-20 所 示 , 当 鼠标 在 扇形 上 滑动 时 ,相应 的 扇形 将 显示 高 


斯 滤 镜 效果 ; 当 鼠 标 滑动 到 中 心 圆 形 上 时 , 圆 形 区 域 呈 现 放 大 效果 。 
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图 5-20 SVG 事件 响应 


在 实际 开发 过 程 中 ,除了 根据 需要 自行 设计 外 ,还 可 以 使 用 网 络 中 开源 的 共享 图 标 库 ， 
如 toicon 矢量 图 标 库 (http://www. toicon. com) 和 阿里 巴巴 矢量 图 标 库 (http://www. 
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iconfont. cn) 。toicon 矢量 图 标 库 如 图 5-21 所 示 ,阿里 巴巴 矢量 图 标 库 如 图 5-22 所 示 , 感 兴 
趣 的 读者 可 以 浏览 网 站 进行 研究 与 学 习 。 
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本 章 总 结 


SVG(Scalable Vector Graphics) 是 一 种 可 缩放 的 矢量 图 形 , 通 过 XML 语言 格式 来 


描述 定义 图 形 。 
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图 5-21 toicon 矢量 图 标 库 
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和 人 回路 从 


SVG 具有 文本 独立 性 、 高 品质 矢量 图 、 超 强 交 互 性 、 超 强 颜 色 控 制 . 基 于 XML 等 特点 。 
SVG 中 提供 了 多 种 数据 类 型 ,除了 整 型 (integer)、 数 值 型 (number)、 百 分 比 
(percentage) 和 日 期 型 (date) 外 .还 有 角度 值 .颜色 值 . 坐 标 值 .频率 值 等 数据 类 型 。 





在 SVG 中 ,svg 元 素 作 为 根 元 素 , 其 他 元 素 都 是 svg 元 素 的 子 元 素 。 
g 元 素 是 一 种 容器 ,用 于 将 多 个 子 元 素 组 合成 一 个 整体 ; g 元 素 的 属性 允许 被 子 元 
素 继承 ; 当 g 元 素 的 属性 发 生变 化 时 , 子 元 素 也 将 随 之 改变 。 
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SVG 中 常见 的 形状 元 素 有 和 扼 形 (rect)、 圆 形 (circle) 、 椭 圆 (ellipse) ,线段 (line) 、 折 线 


(polyline) 和 多 边 形 (polygon) 等 。 
SVG 样式 主要 分 为 字体 文本、 媒体 .裁剪 遮 章 .渐变 、 滤 镜 、 交 互 ,绘图 等 类 型 。 


SVG 中 的 文本 内 容 以 及 样式 可 以 被 动态 修改 ,文本 内 容 还 能 够 作为 图 像 的 主题 被 


搜索 引擎 收录 。 


颜色 渐变 包括 线性 渐变 (linearGradient) 和 径 向 渐变 (radialGradient) ,一 般 在 defs 


元 素 的 内 部 定义 。 
SVG 提供 了 一 些 基 本 的 滤 镜 变 换 元 素 , 如 光照 、 偏 移 .高 斯 模糊 、 色 彩 变 换 等 。 


SVG 动画 是 一 种 基于 SMIL(Synchronized Multimedia Integration Language, 同 步 


多 媒体 集成 语言 ) 的 动画 。 


本 章 练习 


下 


下 列 关 于 SVG 的 描述 中 不 正确 的 是 5 

A. SVG 可 以 在 网 页 上 绘制 出 各 种 各 样 的 高 品质 失 量 图 形 

B. SVG 和 Canvas 都 可 以 在 浏览 器 中 创建 图 形 ,原理 非常 相似 

C. SVG 是 一 种 高 品质 矢量 图 

D. SVG 是 通过 XML 形式 来 组 织 和 传递 数据 的 ,具有 XML 所 具有 的 特点 





. 下 列 选项 中 不 属于 SVG 特点 的 是 
A. 文本 独立 性 B. 高 品质 矢量 图 
C. 基于 XML 等 特点 D. 超 高 清 像素 图 
:不 列 能 够 在 页 面 中 嵌入 SVG 外 包 文件 。 
A. 使 用 embed 元 素 岩 入 SVG B. 使 用 object 元 素 租 入 SVG 
C. 使 用 iframe 元 素 戏 入 SVG D. 使 用 svg 元 素 戏 入 SVG 
. 在 SVG 中 ,使 用 元 素 作为 根 元 素 。 
A. root B. g C. svg D. symbol 
元 素 是 SVG 的 一 个 基本 形状 ,用 来 创建 一 个 矩形 。 
A. rect B. circle C. ellipse D. polyline 
元 素 是 SVG 的 一 个 基本 形状 ,用 来 创建 一 个 多 边 形 。 
A. polyline B. polygon C. multilateral D. multedge 
. 在 HTML 页 面 中 为 SVG 元 素 设置 样式 ,可 以 这 几 种 方式 。 
A. 使 用 SVG 元 素 的 样式 属性 B. 使 用 style 属性 
C. 使 用 class 属性 D. 使 用 className 属性 
. 关于 SVG 动画 说 法 错误 的 是 5 


A. SVG 动画 是 基于 SMIL( 同 步 多 媒体 集成 语言 ) 的 动画 

B. animateMotion 属性 用 来 指定 元 素 沿 着 某 一 路 径 进行 移动 

C. animateTransform 属性 用 来 设置 元 素 坐 标 变化 时 的 动画 效果 
D. animate 属性 用 来 指定 颜色 的 变换 过 程 





多 媒体 API 


AS 本 章 目标 


。 熟悉 多 媒体 视频 的 格式 。 

。 了解 HTML 5 对 多 媒体 格式 的 支持 情况 。 

。 掌握 HTML 5 多 媒体 元 素 的 使 用 。 

。 熟练 使 用 多 媒体 API 控制 视频 和 音频 的 播放 。 
。 掌握 摄像 头 捕 获 原理 。 

。 熟练 使 用 Canvas 元 素 进行 视频 截图 。 


6.1 多 媒体 概述 


多 媒体 (Multimedia) 是 指 多 种 媒体 的 综合 ,一 般 包 括 文 本 、 图 片 .音乐 音效、 视频 、 动 画 
等 多 种 媒体 形式 。 最 初 浏览 器 只 能 解析 文本 信息 , 仅 限于 单一 字体 和 单一 颜色 , 随 着 互联 网 
的 发 展 ,浏览 器 逐步 支持 字体 、 颜 色 .文本 样式 等 效果 。 图 像 声音、 视频 动画 等 媒体 形式 的 
出 现 , 使 得 互联 网 信息 的 传递 更 加 丰富 多 彩 。 

HTML 5 之 前 ,在 网 页 中 播放 视频 或 音频 时 需要 借助 第 三 方 插件 (如 Flash 插件 或 自主 
研发 的 多 媒体 插件 )。 这 些 插件 不 是 浏览 器 厂商 提供 的 ,通常 需要 手动 安装 ,比较 烦琐 ,有 了 时 
也 会 因为 系统 兼容 性 而 导致 浏览 器 的 崩溃 。 

HTML 5 规范 中 新 增 了 video 和 audio 元 素 , 用 于 支持 浏览 器 直接 播放 视频 或 音频 文 
件 , 无 须 事先 在 浏览 器 上 安装 多 媒体 插件 ,只 要 浏览 器 本 身 支持 HTML 5 规范 即 可 。 目 前 ， 
Chrome、Firefox、Opera、Safari、IE 9 十 等 主流 浏览 器 都 支持 使 用 video 和 audio 元 素 , 能 够 
较 好 地 支持 视频 和 音频 的 播放 。 


6.1.1 多 媒体 格式 


多 媒体 元 素 ( 如 视频 、 音 频 等 ) 存 储 于 媒体 文件 中 ,通过 文件 的 扩展 名 可 以 确定 媒体 的 形 
式 , 常 见 的 视频 格式 有 AVI.WMV 、MPEG 、Flash、Mpeg-4 等 ,具体 见 表 6-1。 
表 6-1 常见 的 视频 格式 
格 ” 式 | 扩展 名 描 述 





AVI(Audio Video Interleave) 格 式 是 由 微软 公司 开发 的 ,所 以 Windows 操作 系 


的 Vi | 统 支持 AVI 格式 ,而 其 他 操作 系统 不 一 定 能 够 播放 
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格 式 


续 表 
描 述 





WMV 


Windows Media 格式 是 由 微软 公司 开发 的 , Windows 操作 系统 中 必须 安装 Windows 
Media Player 播放 器 (免费 ) 才 可 以 播放 ,而 其 他 操作 系统 不 一 定 能 够 播放 





MPEG 


MPEG(Moving Pictures Expert Group) 格 式 是 因特网 上 最 流行 的 格式 ,具有 跨 
台 特 征 ,主流 浏览 器 基本 都 支持 





QuickTime 


QuickTime 格式 是 由 苹果 公司 开发 的 ,必须 安装 指定 的 组 件 后 , Windows 操作 系 
统 才能 进行 播放 





RealVideo 


RealVideo 格式 是 由 Real Media 针对 因特网 开发 的 ,该 格式 是 一 种 低 带 宽 条 件 下 
(在 线 视频 、 网 络 电视 ) 的 视频 流 。 由 于 低 带 宽 优先 原则 , 故 视频 质量 往往 会 被 
降低 





Flash 


Flash(Shockwave) 格 式 是 由 Macromedia 开发 的 。Shockwave 格式 需要 额外 的 
组 件 来 播放 ,目前 各 浏览 器 逐步 放弃 对 该 格式 的 支持 





Mpeg-4 





.mp4 





Mpeg-4(with H. 264 video compression) 是 一 种 针对 因特网 的 新 格式 。 越 来 越 多 
的 视频 发 布 者 转 到 MP4, 将 其 作为 Flash 播放 器 或 HTML 5 的 互联 网 共享 格式 


常见 的 音频 格式 有 MIDI、RealAudio、Wave、WMA 和 MP3 等 ,具体 见 表 6-2。 


表 6-2 常见 的 音频 格式 
描 述 





MIDI 


MIDI(Musical Instrument Digital Interface) 是 一 种 针对 电子 音乐 设备 (比如 合成 
器 和 声卡 ) 的 格式 ,多 用 于 播放 一 些 简 单 的 音符 





RealAudio 


RealAudio 格式 是 由 Real Media 针对 因特网 开发 的 ,该 格式 也 支持 视频 。 该 格 
式 是 一 种 低 带 宽 条 件 下 的 音频 流 ( 在 线 音乐 .网络 音乐 )。 由 于 低 带宽 优先 原则 ， 
故 音频 质量 往往 会 被 降低 





Wave 


Wave(waveform) 格 式 由 IBM 和 微软 公司 共同 开发 。 除 了 Chrome 浏览 器 外 ,其 
他 浏览 器 都 对 其 进行 支持 ,Windows 操作 系统 也 对 其 进行 支持 





WMA 


WMA 格式 (Windows Media Audio) 质 量 优 于 MP3 ,兼容 大 多 数 播放 器 , WMA 
文件 可 作为 连续 的 数据 流 来 传输 ,适用 于 网 络 电台 或 在 线 音乐 





MP3 








MP3 文件 实际 上 是 MPEG 文件 的 声音 部 分 ,MP3 也 是 最 受 欢迎 的 针对 音乐 的 
音 格式 之 一 


6.1.2 HTML 5 对 多 媒体 的 支持 


HTML 5 规范 中 新 增 了 video 和 audio 元 素 , 实 现 对 原生 视频 和 音频 的 支持 ,但 由 于 视 
频 、 音 频 的 格式 众多 ,部 分 格式 受到 专利 限制 ,导致 浏览 器 厂商 无 法 自由 选择 视频 和 音频 的 
解码 器 技术 ,从 而 使 得 浏览 器 对 视频 和 音频 格式 的 支持 度 有 限 。 

到 目前 为 止 ,HTML 5 中 主要 支持 以 下 三 种 视频 格式 : MP4、Ogg 和 WebM 格式 ; 其 
中 ,MP4 格式 是 一 种 具有 HH. 264 视频 编码 和 AAC 音频 编码 的 格式 ,但 具有 专利 约束 的 局 
限 ; Ogg 格式 是 一 种 具有 Theora 视频 编码 和 Vorbis 音频 编码 的 格式 ,该 格式 具有 开放 性 、 
兔 版 税 和 无 专利 约束 等 特点 ; 而 WebM 格式 是 一 种 具有 VP8 视频 编码 和 Vorbis 音频 编码 
的 格式 ,Google 对 WebM 格式 大 力 支 持 ,致力 将 其 打造 成 一 种 无 专利 约束 、 免 税 版 的 格式 。 
目前 HTML 5 推荐 使 用 VP8 格式 作为 视频 编码 格式 。 
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主流 浏览 器 对 MP4、Ogg 和 WebM 视频 格式 的 支持 情况 , 见 表 6-3。 
表 6-3 浏览 器 的 视频 格式 支持 情况 














视频 格式 正 9 十 Firefox Opera Chrome Safari 
MP4/H. 264 ~ x x V V. 
Ogg/ Theora x JV ~ V x 
WebM x Vv ~ V x 

















由 于 Ogg Vobis 没有 专利 限制 ,易于 浏览 器 厂商 将 其 作为 内 置 的 音频 解码 器 ,所 以 
HTML 5 推荐 使 用 Ogg Vobis 音频 格式 。 除 此 之 外 ,经 常 使 用 的 音频 格式 还 有 MP3、Wav 
等 。 主 流 浏览 器 对 音频 格式 的 支持 情况 , 见 表 6-4。 

表 6-4 浏览 器 的 音频 格式 的 支持 情况 











音频 格式 IE 9+ Firefox Opera Chrome Safari 
Ogg Vorbis x Vv JV V x 
MP3 Vv x 站 V Vv 
Wav x JV Vv x Vv 

















6.2 HTML 5 多 媒体 元 素 


video ,audio 元 素 与 普通 元 素 相似 ,使 用 非常 简单 ,只 需要 为 其 指定 src 和 controls 等 属 
性 即 可 。video 和 audio 元 素 的 属性 基本 相同 ,具体 见 表 6-5。 
表 6-5 video 和 audio 元素 的 属性 


属 性 描 述 

autoplay | 当 设置 该 属性 时 ,表示 视频 或 音频 装载 完成 后 会 自动 播放 ,属性 取 值 为 autoplay 

controls | 当 设置 该 属性 时 ,表示 视频 或 音频 播放 时 显示 播放 控制 条 ,属性 取 值 为 controls 

height 该 属性 仅 对 video 元 素 有 效 , 用 于 设置 视频 播放 器 的 高 度 

loop 当 设 置 该 属性 时 ,表示 视频 或 音频 播放 完 后 会 再 次 重复 播放 ,属性 取 值 为 loop 

muted 当 设置 该 属性 时 ,表示 视频 或 音频 输出 为 静音 模式 ,属性 取 值 为 muted 

该 属性 仅 对 video 元 素 有 效 , 用 于 设置 视频 下 载 时 所 显示 的 图 像 ,或 者 在 用 户 单 击 播放 按钮 




















poster 








前 所 显示 的 图 像 

用 于 设置 是 否 预 加 载 视频 或 音频 , 取 值 为 auto( 预 加 载 ) .meta( 只 载 人 元 数据 ) .none( 不 执行 
preload 加 载 ); 

当 设 置 autoplay 属性 时 ,preload 属性 将 被 忽略 
SrC 用 于 指定 要 播放 的 视频 或 音频 的 URL 资源 地 址 








width 该 属性 仅 对 video 元 素 有 效 , 用 于 设置 视频 播放 器 的 宽度 


下 述 代码 演示 了 使 用 video 元 素来 播放 视频 。 
【案例 6-1】 videoDemo. html 


<!DOCTYPE html > 
< htm]l > 
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<head> 
<meta charset = "UTF — 8"> 
<title> video 视频 </title> 
</head> 
<body> 
<video id= "myVideo" width= "400" height = "240" src = "videos/timing. mp4" 
controls preload = "meta" poster = "images/timing. jpg"> 
您 的 浏览 器 不 支持 < video /> 标签 
</video> 
</body> 
</html> 


上 述 代 码 中 ,使 用 video 元 素来 播放 视频 文件 ,其 中 src 属性 用 于 指定 视频 的 URL 地 
址 , width 和 height 属性 用 于 设置 视频 的 宽度 和 高 度 ,controls 属性 用 于 设置 在 播放 视频 时 
是 否 显示 控制 条 ,poster 属性 用 于 设置 视频 下 载 时 所 显示 的 图 像 。 代 码 运行 结果 如 图 6-1 
所 示 , 单 击 “ 播 放 ” 按 钮 时 播放 视频 。 当 为 video 元 素 添加 autoplay 或 autoplay 王 "autoplay" 
属性 时 ,视频 加 载 完 毕 将 会 立即 播放 该 视频 。 


© | © 127.00.1:8020/ 全 WB/chapt 女 | EO: 
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6-1 video 元 素 ( 见 彩 插 ) 


下 述 代 码 演 示 了 使 用 audio 元 素来 播放 音频 。 
【案例 6-2】 audioDemo. html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF — 8"> 
<title> audio 音频 </title> 
</head> 
<body> 
< img src = "images/tenYears. jpg" width= "300px"/>< br/> 
<audio id = "myAudio" src = "audios/tenYears. mp3" 
controls autoplay = "autoplay" preload= "meta"> 
您 的 浏览 器 不 支持 < audio/> 标 签 
</audio> 
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</body> 
</html> 


上 述 代码 中 ,使 用 audio 元 素来 播放 音频 文件 ,其 中 src 属性 用 于 指定 音频 的 URL 地 
址 ,controls 属性 用 于 显示 播放 控制 条 。 由 于 audio 元 素 带 有 autoplay 二 "autoplay" 属 性 ,所 
以 在 页 面 加 载 完 毕 时 自动 播放 音频 文件 。 代 码 运行 结果 如 图 6-2 所 示 。 


0 et 


10 





i 029/325 @— 0 一 9 也 





6-2 audio 元 素 ( 见 彩 插 ) 


各 浏览 器 对 视频 (音频 ) 的 支持 格式 有 所 不 同 , 需 要 为 video(audio) 元 素 提 供 多 种 类 型 
的 视频 (音频 ) 源 ,来 解决 浏览 器 的 兼容 性 问题 。 为 了 解决 浏览 器 对 视频 .音频 格式 的 支持 问 
题 ,HTML 5 中 提供 了 source 元 素 , 用 于 为 video(audio) 元 素 提供 多 种 类 型 的 视频 (音频 ) 
媒体 源 ,浏览 器 可 以 根据 自身 情况 来 选择 适合 自己 播放 的 媒体 源 。source 元 素 的 属性 见 
表 6-6。 
表 6-6 ”source 元素 的 属性 

属性 说 明 

media | 用 于 设置 媒体 资源 的 类 型 ,目前 所 有 浏览 器 暂 不 支持 该 属性 

src “| 用 于 指定 要 播放 的 视频 或 音频 的 URL 地 址 


用 于 设置 媒体 资源 的 MIME 类 型 ,视频 的 MIME 类 型 为 video/ogg、video/mp4 video/ webm; 
音频 的 MIME 类 型 为 audio/ogg、audio/mpeg、audio/x-wav 











type 





下 述 代 码 演 示 了 使 用 source 元 素 指 定 视频 源 或 音频 源 
【案例 6-3】 audioDemo. html 


<div id= "videoDiv"> 
<video poster = " images/timing. jpg" height = "300px" controls> 
< source src = "videos/timing. mp4" type = "video/mp4" /> 
< Source src= "videos/timing. webm" type = "video/webm" /> 
< source src = "videos/timing. ogv" type= "video/o0gg" /> 
您 的 浏览 器 不 支持 < video /> 标签 
</video> 
</div> 
<div id= "audioDiv"> 
< img src = "images/raining girl. jpg" height = "265px"/><br /> 
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<audio controls> 
< source src = "audios/raining. mp3" type = "audio/mpeg" /> 
< source src = "audios/raining. ogg" type = "audio/ogg" /> 
< source src = "audios/raining. wav" type= "audio/x— wav" /> 
您 的 浏览 器 不 支持 < audio /> 标签 
</audio> 
</div> 


上 述 代 码 中 ,使 用 source 元 素 为 video 和 audio 元 素 提 供 了 多 种 类 型 的 媒体 源 ,不 同 的 
浏览 器 可 以 根据 自身 特点 来 选择 适合 自己 播放 的 媒体 源 ,以 保障 各 浏览 器 都 能 够 正常 播放 
视频 或 音频 。 代 码 运 行 结果 如 图 6-3 所 示 , 左 侧 是 由 video 和 source 元 素 实 现 的 视频 播放 





Pp 0001310 @—— 加 的 








图 6-3 source 元素 


IE 8 及 更 早 的 版 本 不 支持 video audio 和 source 元 素来 播放 视频 或 音频 文件 。 





6.3 多 媒体 API 的 使 用 


HTML 5 不 仅 能 够 使 用 video 和 audio 元 素来 播放 视频 和 音频 ,还 能 够 通过 HTML 5 
Media API 来 控制 视频 和 音频 的 播放 进度 、 播 放 速 度 及 声音 大 小 。 

HTML 5 Media API 中 提供 了 video 和 audio 对 象 ,用 于 控制 视频 或 音频 的 回放 ,提供 
视频 或 音频 的 当前 播放 状态 。video 和 audio 对 象 的 功能 非常 相似 ,唯一 区 别 在 于 所 占 屏幕 
空间 不 同 ,两 者 所 具有 的 属性 和 方法 也 基本 相同 ,常用 的 属性 见 表 6-7。 

表 6-7 video(audio) 对 象 的 属性 
属 性 描 述 


controller 返回 音 视频 的 当前 媒体 控制 器 ,返回 一 个 MediaController 对 象 
autoplay 用 于 设置 或 返回 在 加 载 完 成 时 立即 播放 视频 /音频 














属 性 
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续 表 
描 述 





controls 


用 于 设置 或 返回 视频 /音频 是 否 显 示 媒体 控制 器 





currentSrc 


用 于 返回 当前 视频 /音频 的 URL 地 址 





currentTime 


用 于 设置 或 返回 视频 /音频 的 当前 播放 位 置 (单位 以 秒 计 ) 





defaultMuted 


用 于 设置 或 返回 视频 /音频 默认 是 否 静 音 





duration 


用 于 返回 当前 视频 /音频 的 总 长 度 (单位 以 秒 计 ) 





defaultPlaybackRate 


用 于 设置 或 返回 音频 /视频 的 默认 播放 速度 





ended 


用 于 返回 当前 视频 /音频 的 播放 是 否 结束 





error 


用 于 返回 表示 视频 /音频 错误 状态 的 MediaError 对 象 





loop 


用 于 设置 或 返回 视频 /音频 在 结束 时 是 否 再 次 播放 





muted 


用 于 设置 或 返回 视频 /音频 是 否 静 音 





networkState 


用 于 返回 视频 /音频 的 当前 网 络 状态 ,NETWORK_EMPTY(0) 表 示 视 频 / 音 频 
尚未 初始 化 ,NETWORK_IDLE(1) 表 示 视 频 / 音 频 是 活动 的 且 已 选取 资源 ,但 并 
未 使 用 网 络 ,NETWORK_LOADING(2) 表 示 浏 览 器 正在 下 载 数据 ,NETWORK 
_NO_SOURCE(3) 表 示 未 找到 视频 /音频 来 源 





paused 


用 于 设置 或 返回 视频 /音频 是 否 处 于 暂停 状态 





playbackRate 


用 于 设置 或 返回 当前 视频 /音频 的 播放 速度 ,1. 0 表示 正常 速度 ,0. 5 表示 半 速 
(更 慢 ) ,2.0 表示 倍速 (更 快 ), 一 1.0 表示 向 后 正常 速度 ,一 0. 5 表示 向 后 半 速 

















played 用 于 返回 视频 /音频 已 播放 的 部 分 

Src 用 于 设置 或 返回 视频 /音频 的 src 属性 的 值 
readyState 用 于 返回 视频 /音频 当前 的 就 绪 状 态 
volume 用 于 设置 或 返回 视频 /音频 的 音量 


video 和 audio 对 象 的 常用 方法 见 表 6-8。 


表 6-8 ”video(audio) 对 象 的 方法 列表 

















需 、 涂 描 述 
addTextTrack() 向 视频 /音频 添加 新 的 文本 轨道 
canPlayType() 检查 浏览 器 是 否 能 够 播放 指定 的 视频 /音频 类 型 
load() 重新 加 载 视频 /音频 元 素 
play() 开始 播放 视频 /音频 
pause() 暂停 当前 播放 的 视频 /音频 





下 述 代 码 演 示 了 使 用 HTML 5 Media API 来 实现 一 个 自 定义 视频 播放 器 。 
【案例 6-4】 videoPlayer. html 


<div id= "videoDiv"> 
<div class = "playHeader"> 
<div class = "videoName">T- ara - 懂 的 那 份 感觉 </div> 


</div> 


<video id= "myVideo" poster = "images/listenMusic. jpg" controls 
案例 视频 讲解 





width= "100%" height = "100% "> 
< source src = "videos/myVideo. mp4" type = "video/mp4"/> 
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< source src = "videos/myVideo. ogv" type = "video/ogg"/> 
</video> 
<div class = "playControl1" > 
< input id = "videoplayer" class = "playPause" type = "button" value = "播放 "/> 
<div class = "timebar"> 
< span id = "currentDuration" class = "currentTime"> 00:00:00 </span> 
< input id = "videoRange" class = "progress" type = "range" 
value= "0" max= "100" /> 
< span id = "duration" class = "duration"> 00:03:24 </span> 
</div> 
<div class = "otherControl"> 
< input id = "videoVoice" type = "button" value = "静音 "/> 
< input id = "fullScreenBtn" type = "button" value = "全 屏 "/> 
</div> 
</div> 
</div> 
< script type = "text/javascript"> 
Var myVideo = document. getElementById("myVideo" ); 
Var videoPlayer = document. getElementById("videoPlayer"); 
Var currentDuration = document. getElementById( "currentDuration" ); 
Var videoRange = document, getElementById("videoRange" ); 
Var videoVoice = document, getElementBYId("videoVoice" ) ; 
var duration = document. getElementById( "duration" ); 
var fullScreenBtn = document. getElementById("ful1ScreenBtn" ); 
// 播 放 /暂停 按钮 
videoPlayer. onclick = function(){ 
if(myVideo. paused){ 
myVideo. play(); 
videoPlayer. value = "暂停 "; 
}else{ 
myVideo. pause( ); 
videoPlayer. value = "播放 "; 


}; 

// 视 频 播放 时 ,滚动 条 同步 

myVideo. ontimeupdate = function(){ 
var currentTime = Math. round(myVideo. currentTime, 0); 
var totalTime = Math. round(myVideo. duration, 0); 
currentDuration. innerHTML = dealTime(currentTime); 
duration. innerHTML = dealTime( totalTime); 
if(myVideo. ended){ 

VideoRange. innerHTML = 0; 


}; 
// 拖 动 滚动 条 时 ,视频 进度 同步 
videoRange. onmousedown = function( ){ 
myVideo. pause( ); 
}; 
VideoRange. onmouseup = function( ){ 
myVideo. currentTime = myVideo. duration * (videoRange. value/videoRange. max); 
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myVideo. play(); 
videoPlayer. value = "暂停 "; 
}; 
// 静 音 或 取消 静音 
VideoVoice. onclick = function(){ 
if(!myVideo. muted){ 
videoVoice. value = "声音 "; 
myVideo. muted = true; 
}else{ 
videoVoice. value = "静音 "; 
myVideo. muted = false; 
} 
}; 
// 视 频 全 屏 显示 
fullScreenBtn. onclick = function( ){ 
if(myVideo. requestFullScreen){ 
myVideo. requestFullScreen( ); 
}else if(myVideo. mozRequestFullScreen){ 
myVideo. mozRequestFullScreen( ); 
}else if(myVideo. webkitRequestFullScreen){ 
myVideo. webkitRequestFullScreen( ); 
} 
} 
// 对 所 传人 的 secondNum 秒 数 ,按照 分 秒 形式 显示 
function dealTime( secondNum){ 
var hour = 0; 
var minute = 0; 
Var second = secondNum % 60; 
minute = Math. floor( secondNum/60); 
if(minute> 60){ 
hour = Math. floor(minute/60); 
minute = minute % 60; 
| 
return fixTime(hour) + ":" + fixTime(minute) + ":" + fixTime( second); 
} 
function fixTime(num){ 
return num> 10?num: '0' + num; 
} 


</script> 


上 述 代 码 中 ,使 用 video 对 象 自 定义 了 一 个 视频 播放 器 ,如 图 6-4 所 示 。 单 击 “ 播 放 ” 按 
钮 时 播放 视频 ,按钮 的 文本 变 为 暂停”; 单 击 “ 暂 停 ” 按 钮 时 ,视频 暂停 播放 ,按钮 文本 变 为 
“播放 ”。 进 度 条 左 侧 文 本 用 于 显示 当前 视频 的 播放 进度 ,进度 条 右 侧 文本 用 于 显示 当前 视 
频 的 总 长 度 。 单 击 “ 静 音 ” 按 钮 时 ,视频 处 于 静音 状态 ,按钮 文本 变 为 声音” 当 单 击 “ 声 音 ” 
按钮 时 ,视频 恢复 有 声 状态 ,按钮 文本 变 为 “静音 ”"。 单 击 “ 全 屏 ” 按 钮 时 ,视频 切换 为 全 屏 状 
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态 , 按 Esc 键 退 出 全 屏 。 


la) [sls[ 
Vn esxmsns x 


C | © 127.0.0.1.8020/ 齐 5 源 3/chapter06/videopla 女 | 将: 











T-ara - 懂 的 那 份 感觉 





| 播放 | 00:00:00 上 00:03:24 | 琢 音 || 全 屏 | 











图 6-4 自 定义 视频 播放 器 


6.4 摄像 头 的 捕获 


WebRTC 是 一 种 用 于 处 理 音频 或 视频 数据 流 的 流 媒 体 API, 通 过 MediaStream 对 象 来 
操作 音频 流 或 视频 流 。MediaStream 对 象 具 有 输入 接口 和 输出 接口 ,通过 navigator. 
getUserMedia() 方 法 来 获取 媒体 流 , 媒 体 流 可 以 是 本 地 的 摄像 头 或 麦克 风 , 也 可 以 是 网 络 中 
的 音频 或 视频 。 

下 述 代码 演示 了 使 用 HTML 5 WebRTC 实现 摄像 头 拍照 效果 。 

【案例 6-5】 captureCamera. html 


<div class = "contentarea"> 
<div class = "camera"> 
<video id= "video"></video> 
<button id = "snapButton" class = "buttons"> 拍 照 </button > 
</div> 
< div class = "output"> 
< img id= "photo" /> 
<button id = "saveButton" class = "buttons"> 捕 获 的 照片 </button > 
</div> 
< canvas id = "hiddenCanvas"></canvas > 
</div> 
< script type = "text/javascript" src = "capture. js"></script> 





【案例 6-6】 capture. js 


(function(){ 
// 设 置 摄像 头 与 所 捕获 图 像 的 宽度 
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var width= 320; 
var height = 0; // 高 度 是 根据 视频 流 的 高 度 进行 计算 获得 的 
var streaming = false; 
Var video= null; 
Var canvas = null; 
Var photo= null; 
var snapButton = null; 
// 初 始 化 
function init(){ 
Video = document. getElementById( 'video'); 
canvas = document. getElementById( ‘hiddenCanvas'); 
photo = document. getElementById( 'photo'); 
snapButton = document. getElementById( 'snapButton') 7 
// 兼 容 各 主流 浏览 器 
navigator, getMedia = navigator. getUserMedia 
| |navigator. webkitGetUserMedia| |navigator. mozGetUserMedia 
| |navigator. msGetUserMedia; 
// 从 摄像 头 读 取 视频 流 ,并 在 video 元 素 中 显示 
navigator. getMedia( { 
Video: true, 
audio: false 
}, 
function( stream){ // 读 取 成 功 ,对 视频 流 进行 处 理 
if (navigator. mozGetUserMedia){ 
Video. mozSrcObject = stream; 
Jelse{ 
var vendorURL = window. URL | | window. webkitURL; 
video. src = vendorURL. createObjectURL( stream); 
} 
video. play( ); 
}, 
function(err){ ”// 读 取 失 败 
console. log( "错误 信息 : " + err); 
1); 
// 为 video 绑 定 canplay 事件 ; 当 浏览 器 能 够 开始 播放 指定 的 视频 时 ,触发 canplay 事件 
video. addEventListener( 'canplay', function(ev){ 
if(!streaming){ 
height = video. videoHeight/(video. videoWidth/width); 
if(isNaN(height)){ 
height = width/(4/3); 
} 
video. setAttribute( ‘width', width); 
video. setAttribute( ‘height', height); 
canvas. setAttribute( ‘width', width); 
canvas. setAttributel( 'height', height); 
streanming = true; 
} 
},false); 
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// 为 拍照 按钮 绑 定 click 事件 
snapButton. addEventListener( 'click', function(ev){ 
takepicture( ); 
ev. preventDefault(); 
}, false); 
clearphoto( ); 
} 
function clearphoto( ){ 
var context = canvas. getContext( '2d'); 
context. fillStyle="#AAA"; 
context. fillRect(0,0, canvas. width, canvas. height); 
var data = canvas. toDataURL( 'image/png'); 
photo. setAttributel( 'src', data); 
} 
function takepicture( ){ 
Var context = canvas. getContext( '2d'); 
if(widthggheight){ 
canvas. width = width; 
canvas. height = height; 
context. drawImage(video, 0, 0, width, height); 
var data = canvas. toDataURL( 'image/png'); 
Photo. setAttributel( 'src', data); 
Jelse{ 
clearphoto( ); 
} 
} 
// 为 窗口 添加 load 事件 
window. addEventListener( 'load', init, false); 
DO; 


上 述 代 码 中 ,通过 navigator. getUserMedia() 方 法 从 摄像 头 获 取 视 频 流 , 并 在 video 元 
素 中 实时 显示 视频 流 中 的 数据 。 当 单 击 “ 拍 照 ” 按 钮 时 ,从 视频 流 中 捕获 当前 时 刻 的 影像 数 
据 , 并 通过 隐藏 的 canvas 元 素 进行 处 理 , 然 后 将 处 理 后 的 数据 在 img 元 素 中 显示 ( 即 被 捕获 
的 图 形 ) ,效果 如 图 6-5 所 示 。 











图 6-5 摄像头 的 捕获 


6.5 视频 截图 
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在 使 用 video 元 素 播放 视频 时 ,可 以 将 video 元 素 作为 context. drawImage() 方 法 的 图 
像 来 源 ,通过 此 种 方式 对 视频 进行 截图 。 下 述 代码 演示 了 使 用 canvas 元 素 和 video 元 素来 


实现 从 视频 流 中 截取 图 像 。 


播放 的 视频 进行 截图 ,并 在 canvas 元 素 中 绘制 出 来 ,效果 如 图 6-6 所 示 。 








【案例 6-7】 captureVideo. html 


<div class = "videoDiv"> 
<video id= "myVideo" autoplay controls> 
< source src = ". ./videos/timing.mp4" type = "video/mp4"/> 
< source src = ". ./videos/timing. webm" type = "video/webm"/> 
< source src = ". ./videos/timing.ogv" type = "video/o0gg"/> 
</video> 
<button id = "snapButton" class = "buttons"> 视 频 截 图 之 </button > 
</div> 
<div> 
< canvas id = "myCanvas" width = "400px" height = "230px"></canvas > 
</div> 
< Script> 
var snapButton = document. getElementById("snapButton"); 
var myVideo = document, getElementById( "myVideo"); 
var myCanvas = document. getElementById( "myCanvas" ); 
Var context = myCanvas. getContext("2d"); 
snapButton. onclick = function(){ 
context. drawImage( myVideo, 0, 0, myCanvas. width, myCanvas. height) ; 
}; 


</script > 


上 述 代码 中 ,使 用 video 元 素来 播放 指定 的 视频 , 当 单 击 “ 视 频 截图 >>” 按 钮 时 ,将 正在 
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图 6-6 视频 截图 ( 见 彩 插 ) 
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本 章 总 结 


多 媒体 (Multimedia) 是 指 多 种 媒体 的 综合 ,一般 包括 文本 .图片 音乐. 音效、 视频、 
动画 等 多 种 媒体 形式 。 

HTML 5 规范 中 新 增 了 video 和 audio 元 素 , 用 于 支持 浏览 器 直接 播放 视频 或 音频 
文件 ,无 须 事先 在 浏览 器 上 安装 多 媒体 插件 ,只 要 浏览 器 本 身 支持 HTML 5 规范 
即 可 。 

多 媒体 元 素 ( 如 视频 .音频 等 ) 存 储 于 媒体 文件 中 ,通过 文件 的 扩展 名 可 以 确定 媒体 
的 形式 ,常见 的 视频 格式 有 AVI、WMV 、MPEG Flash、Mpeg-4 等 。 

到 目前 为 止 ,HTML 5 中 主要 支持 以 下 三 种 视频 格式 : MP4、Ogg 和 WebM 格式 。 
目前 各 主流 浏览 器 ,如 Chrome、Firefox、Opera、Safari、IE 9 十 等 都 支持 使 用 video 和 
audio 元 素来 播放 视频 和 音频 文件 。 

HTML 5 中 提供 了 source 元 素 , 用 于 为 video(audio) 元 素 指定 多 种 类 型 的 视频 ( 音 
频 ) 媒 体 源 ,浏览 器 可 以 根据 自身 情况 来 选择 适合 自己 播放 的 媒体 源 。 

通过 HTML 5 Media API 可 以 控制 视频 与 音频 的 播放 进度 、 播 放 速 度 及 声音 大 小 。 
WebRTC 是 一 种 用 于 处 理 音频 或 视频 数据 流 的 流 媒 体 API, 通 过 MediaStream 对 
象 来 操作 音频 流 或 视频 流 。 

通过 navigator. getUserMedia() 方 法 来 获取 媒体 流 , 媒 体 流 可 以 是 本 地 的 摄像 头 或 
麦克 风 , 也 可 以 是 网 络 中 的 视频 或 音频 。 

在 使 用 video 元 素 播放 视频 时 ,可 以 将 video 元 素 作为 context. drawImage() 方 法 的 
图 像 来 源 ,从 而 实现 对 视频 的 截图 。 


本 章 练习 
1. 下 列 选项 中 不 是 HTML 5 规范 中 所 支持 的 视频 格式 。 
A. MP4 B. avi C. Ogg D. WebM 
2. HTML 5 推荐 使 用 格式 作为 音频 格式 。 
A. Ogg Vobis B. MP3 C. Wav D. Wma 
3. 下 列 关 于 video 元 素 的 属性 说 法 错误 的 是 。 
A. poster 属性 用 于 设置 视频 下 载 时 所 显示 的 图 像 ,或 在 单 击 “播放 ”按钮 前 所 显示 


的 图 像 

preload 属性 用 于 设置 是 否 预 加 载 视频 或 音频 

controls 属性 用 于 设置 视频 或 音频 播放 速度 

video 元 素 与 普通 元 素 相似 ,在 使 用 时 只 需要 为 其 指定 src 和 controls 等 属性 
即 可 


只 


Sn 


.以 下 关于 视频 格式 说 法 错误 的 是 。 


A. MPEG 格式 是 目前 Internet 中 最 流行 的 格式 ,具有 跨 平台 特征 
B. RealVideo 格式 是 一 种 低 带宽 条 件 下 (在 线 视 频 、 网 络 电 视 ) 的 视频 流 , 由 于 遵循 
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低 带 宽 优 先 原则 ,视频 质量 往往 会 被 降低 


C. Shockwave 格式 是 由 Macromedia 开发 的 ,需要 额外 的 组 件 来 播放 
D. AVI(Audio Video Interleave) 格 式 是 由 微软 公司 开发 的 ,所 有 的 操作 系统 支持 
AVI 格式 

. 关于 HTML 5 多 媒体 API 说 法 错误 的 是 吕 

A. 在 HTML 5 规范 之 前 ,网 页 播放 视频 或 音频 时 需要 借助 第 三 方 插件 

B. HTML 5 规范 中 新 增 了 video 和 audio 元 素 ,用 来 支持 在 浏览 器 中 直接 播放 视频 
或 音频 文件 

. 多 媒体 格式 众多 ,浏览 器 视频 格式 和 音频 格式 的 选择 范围 比较 随意 

D. 通过 HTML 5 Media API 来 控制 视频 与 音频 的 播放 进度 .播放 速度 及 声音 大 小 
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人 本 章 目标 


。 了 解 Cookie 存储 技术 。 

。 熟悉 Web Storage API 接口 。 

。 熟练 使 用 Web Storage 存储 数据 。 

。 熟悉 IndexedDB API 接口 。 

。 熟练 使 用 IndexedDB 对 数据 进行 存储 。 


7.1 Cookie 技术 


随 着 互联 网 的 深层 次 发 展 , 人 们 需要 更 复杂 的 互联 网 交互 活动 ,就 必须 与 服务 器 保持 会 
话 状 态 。Cookie 是 一 种 在 客户 端 保持 会 话 跟 踪 的 解决 方案 ,在 浏览 器 客户 端 保存 用 户 会 话 
信息 ,以 便服 务 端 对 客户 端 身份 进行 识别 。 在 用 户 第 一 次 访问 服务 端 时 ,由 服务 端 通过 响应 
头 的 方式 发 送 给 客户 端 浏览 器 ; 当 用 户 再 次 向 服务 端 发 送 请 求 时 会 附带 这 些 文本 信息 , 服 
务 端 通过 对 请 求 头 进行 分 析 从 而 得 到 客户 端 特 有 的 信息 。 无 论 用 户 何 时 连接 到 服务 器 ， 
Web 服务 端 都 能 够 访问 Cookie 文件 中 的 信息 ,客户 端 通过 JavaScript 也 可 以 对 Cookie 信 
息 进 行 操作 。 

Cookie 以 文本 方式 进行 存储 ,本 质 上 是 一 个 字符 串 ,使 用 方式 如 下 。 


document. cookie = cookieString; 


其 中 ,cookieString 是 浏览 器 保存 的 Cookie 信息 ,使 用 时 需要 注意 以 下 几 项 。 

。 Cookie 所 存储 的 信息 量 较 少 ,每 个 Cookie 所 存放 的 数据 不 能 超过 4KB; 

。 Cookie 信息 由 多 个 键 值 对 (key/value) 构 成 ,使 用 key 来 检索 Cookie 信息 ,如 
domain .expires 和 path 等 信息 ; 

。 domain 表示 域 ,用 来 告知 浏览 器 应 该 提交 哪个 Cookie 到 该 域 中 的 服务 端 , 当 
Cookie 中 没有 指定 域 时 ,domain 表示 当前 页 面 所 在 的 域 ; 

。 expires 表示 Cookie 的 过 期 时 间 , 其 格式 是 UTC 格式 ,可 以 通过 Date. 
toGMTString() 方 法 来 生成 . 当 Cookie 到 达 该 时 间 点 时 ,Cookie 将 会 被 删除 ,默认 
情况 下 ,在 浏览 器 关闭 时 Cookie 立即 失效 ; 
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。 path 用 于 设置 Cookie 的 访问 路 径 , 只 有 此 路 径 下 的 页 面 才能 读 写 该 Cookie ,一般 将 
path 设 为 “/”, 表 示 当 前 站 点 中 的 所 有 页 面 都 可 以 访问 该 Cookie。 
默认 情况 下 ,Cookie 信息 是 一 种 纯 文 本 信息 , 且 没 有 经 过 编码 处 理 。 当 Cookie 中 包含 
空格 分 号 .逗号 等 特殊 符号 时 ,需要 使 用 escape() 方 法 进行 编码 ,从 Cookie 中 取出 数据 时 ， 
需要 使 用 unescape() 方 法 进行 解码 。 
下 述 代码 演示 了 使 用 Cookie 技术 保存 用 户 名 和 密码 。 
【案例 7-1】 cookie. html 


< section class = "container"> 
<div class = "login"> 
<hl > 用 户 登 录 </hl > 
< form name = "myform”method = "post"> 
<p>< input type = "text" name = "loginName" placeholder = "用 户 名 "></p> 
<p>< input type = "password" name = "password" placeholder = "密码 "></p> 
< Pp class = "rememberMe"> 
< input type = "checkbox" name = "rememberMe"> 记 住 密码 
< select name = "saveTime"> 
< option value = "1">1 天 </option> 
< option value = "7"> 7 天 </option> 
< option value = "30" > 30 天 </option> 
<option value ="- 1" selected>- 不 保存 -</option> 
</select> 
</p> 
<pclass= "submit">< input type = "button" name = "loginBtn" value = "登录 "></p> 
</form>< br/>< hr/> 
<div id = "cookieDiv"> cookie 信息 显示 位 置 </div> 
</div> 
</section> 
< Script> 
//Cookie 信息 直接 的 分 隔 符 ( 用 户 可 任意 指定 分 隔 符 ) 
Var cookieSplit ="#"; 
Var cookieName = "userLoginPage" 
Var rememberMe = document. myform. rememberMe; 
var loginBtn = document. myform. loginBtn; 
// 保 存 Cookie 信息 
loginBtn. onclick = function(){ 
var loginName = document. myform. loginName. value; 
var password = document. myform. password. value; 
Var saveTime = document. myform. saveTime. value; 
Var expireDate = new Date( ); 
if(saveTime!="—1"){ 
expireDate. setDate( expireDate. getDate( ) + saveTime); 
} 
// 向 Cookie 中 写 入 信息 
document. cookie = cookieSplit + cookieName + " = " + escape( loginName) 
+","+escape(password) + ";expires = " + expireDate. toGMTString( ); 
loadCookie( ); 
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// 加 载 Cookie 信息 
function loadCookie( ){ 
// 读 取 页 面 的 Cookie 信息 
Var currentCookie = document. cookie; 
//Cookie 的 开始 部 分 
var beginPart = cookieSplit + cookieName + " ="; 
//Cookie 数据 部 分 的 开始 位 置 
var startPosition = currentCookie. indexOf (beginPart); 
//Cookie 的 关键 数据 部 分 
Var cookieData = ""; 
// 没 有 找到 相关 的 cookie 
if(startPosition== -1){ 
document. myform. loginName. value = ""; 
document. myform. password. value = ""; 
document. myform. rememberMe. checked = ""; 
Jelse{ 
//Cookie 数据 部 分 的 结束 位 置 
var endPosition = currentCookie. indexOf(";", startPosition); 
// 当 前 cookie 为 cookie 集合 中 的 最 后 一 个 时 (没有 找到 分 号 ; ) 
if(endPosition== -1)1{ 
endPosition = currentCookie. length; 
} 
cookieData = currentCookie. substring( startPosition 
+ (beginPart). length, endPosition); 
// 对 Cookie 数据 进行 分 割 
var datas = cookieData. split(","); 
document. myform. loginName. value = unescape( datas[0]); 
document. myform. password. value = unescape( datas[1]); 
document. myform. rememberMe. checked = "checked"; 
// 获 取 Cookie 信息 的 保存 时 间 
var expireDate = currentCookie. indexOf (endPosition); 
document. myform. saveTime. value = 30; 
document. getElementById( "cookieDiv"). innerHTML = 
"所 存储 的 cookie 信息 :" + (document. cookie =="" 
?"< font color = 'red> 暂 无 cookie 信息 </font >" :document. cookie); 
} 
// 选 中 " 记 住 密码 "时 ,默认 记 住 时 间 为 30 天 
rememberMe. onclick = function(){ 
if(this. checked){ 
document. myform. saveTime. value = 30; 
}else{ 
document. myform. saveTime. value= —1; 
} 
} 
loadCookie( ); 
</script> 


上 述 代 码 运行 结果 如 图 7-1 所 示 ,在 用 户 输入 用 户 名 和 密码 后 ,选中 “ 记 住 密码 ”时 下 拉 
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列表 框 自动 选择 “30 天 ”; 当 单 击 “ 登 录 ” 按 钮 时 ,将 用 户 的 登录 信息 保存 到 Cookie 中 ,然后 
将 Cookie 信息 解析 出 来 并 在 cookieDiv 元 素 中 显示 。 当 用 户 再 次 访问 登录 该 页 面 时 ,从 
Cookie 中 把 用 户 名 和 密码 信息 解析 出 来 ,并 在 输入 框 中 显示 。 用 户 取 消 * 记 住 密码 ”后 , 单 
击 “ 登 录 ” 按 钮 时 将 会 清空 Cookie 中 所 保存 的 信息 。 





辆 记 住 本 码 | 30 天 


所 存储 的 cookie 信 息 : 
userLoginPage=jCuckoo,guoqy 





图 7-1 Cookie 技术 的 使 用 


在 Web 应 用 程序 中 ,本 地 持久 化 存储 已 经 成 为 广大 网 络 用 户 和 Web 开发 人 员 和 争论 
的 一 个 焦点 ,特别 是 在 数据 的 存储 格式 和 数据 安全 性 方面 。 大 部 分 网 络 用 户 甚至 部 
分 资深 Web 专家 对 Cookie 技术 持 有 否定 态度 ,这 并 不 是 因为 Cookie 技术 的 功能 太 
弱 或 其 他 技术 性 能 上 的 原因 ,而 是 因为 Cookie 的 使 用 会 对 网 络 用 户 的 隐私 构成 一 
定 的 威胁 。 


7.2 Web Storage 


在 HTML 5 出 现 之 前 , 当 需 要 在 浏览 器 客户 端 存储 信息 时 ,只 能 通过 Cookie 技术 来 实 
现 。 但 Cookie 技术 存在 一 定 的 局 限 性 ,如 安全 性 不 够 高 .数据 操作 烦琐 、 数 据 存储 量 受 限 
等 。HTML 5 中 新 增 了 Web Storage 存储 机 制 ,是 一 种 对 Cookies 存储 机 制 的 改善 。 
Web Storage 用 于 在 浏览 器 客户 端 保存 数据 ,数据 存储 形式 分 为 Session Storage 和 
Local Storage 两 种 ,具体 如 下 。 
。 Session Storage: 将 数据 保存 在 Session 会 话 中 。Session 会 话 是 指 在 用 户 浏览 网 站 
时 ,从 进入 网 站 开始 到 浏览 器 关闭 所 经 历 的 时 间 , 即 用 户 浏 览 该 网 站 所 花费 的 时 间 。 
Session 对 象 用 于 保存 用 户 浏览 网 站 这 段 时 间 内 所 需 保 存 的 任何 数据 , 当 Session 失 
效 时 ,Session Storage 存储 的 数据 也 将 随 之 丢失 。 
。 Local Storage: 将 数据 保存 在 客户 端的 硬件 设备 中 。 在 浏览 器 关闭 之 后 ,数据 继续 
保存 在 浏览 器 客户 端 , 当 使 用 浏览 器 重新 访问 该 页 面 时 ,Local Storage 中 的 数据 仍 
然 有 效 ,除非 用 户 或 程序 显 式 地 清除 该 数据 .否则 数据 将 一 直 存 在 。 
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HTML 5 规范 提供 了 Storage 接口 ,语法 格式 如 下 。 
【语法 】 


interface Storage{ 
readonly attribute unsigned long length; 
DOMString key(unsigned long n); 
DOMString getItem( DOMString key); 
void setItem(DOMString key, DOMString value); 
void removeItem(DOMString key); 
void clear(); 


}; 


其 中 ， 

。 length 属性 为 只 读 属 性 ,返回 一 个 整数 ,表示 存储 在 Storage 中 数据 项 的 数量 ; 

。 key() 方 法 用 于 返回 Storage 中 的 第 n 个 键 名 ; 

。 getltem() 方 法 用 于 根据 键 名 返回 对 应 的 value 值 ; 

。 setItem() 方 法 用 于 将 key/value 数据 添加 到 Storage 中 , 当 key 存在 时 更 新 相应 的 

value 值 ; 

。 removeltem() 方 法 用 于 根据 键 名 将 数据 从 Storage 中 删除 ; 

。 clear() 方 法 用 于 清空 Storage 中 的 所 有 key/value 值 。 

在 Windows 中 提供 了 sessionStorage 和 localStorage 两 个 子 对 象 , 分 别 用 来 实现 
Session Storage 和 Local Storage 形式 的 数据 存储 。sessionStorage 和 localStorage 对 象 都 
是 Storage 接口 的 实例 ,两 者 的 属性 和 方法 基本 相同 ,区 别 在 于 数据 的 生命 周期 有 所 不 同 。 


7.2.1 Session Storage 


Session Storage 是 一 种 针对 Session 会 话 的 数据 存储 。 当 用 户 关闭 浏览 器 窗口 时 , 数 
据 会 被 同时 清除 。 目 前 几乎 所 有 浏览 器 都 支持 Session Storage, 其 中 IE 10 十 也 对 Session 
Storage 提供 了 支持 ,但 是 直接 预览 本 地 页 面 时 没有 效果 ,需要 将 页 面 上 传 至 服务 端 后 ,通过 
URL 地 址 进行 访问 时 才能 使 用 Session Storage 来 存储 数据 。 

下 述 代码 演示 了 使 用 Session Storage 来 存储 在 线 用 户 的 信息 。 

【案例 7-2】 sessionStorage. html 


<div id= "loginDiv"> 
<div class = "header"> 
< embed src = "svg/cuckoo. svg" width = "100" type = "image/svg + xml"/> 
< span class = "title"> 布 谷 鸟 直播 室 </span> 
</div>< hr/> a 
用 户 名 : < input type = "text" id= "userName"/> 案例 视频 讲解 
< input type= "button" id = "inputButton" value = "进入 直播 间 "/> 
</div> 
<div> 
<table width = "400px"> 
< thead > 
<tr><th> 在 线 用 户 </th><th width = "180px"> 登 录 时 间 </th></tr> 
</thead> 
<tbody id= "resultTable"> 
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<tr><td colspan = "2"> 暂 无 用 户 </td></tr> 
</tbody> 
</table> 
</div> 
< script type = "text/javascript"> 
var i=1; 
// 防 止 每 次 刷新 页 面 时 i 重新 计数 
if(sessionStorage. getItem("i")!= null){ 
i= sessionStorage. getItem("i"); 
! 
var inputButton = document. getElementById("inputButton"); 
// 向 sessionStorage 记录 用 户 名 
inputButton. onclick = function( ){ 
var userName = document. getElementById( "userName" ); 
if(userName. value == ""){ 
alert(" 用 户 名 不 能 为 空 "); 
return; 
} 
var loginTime = formateTime(new Date( )); 
var user={ 
userName:userName. value, 
loginTime: loginTime 
4 
sessionStorage. setItem("user" + i,JSON. stringify(user)); 
sessionStorage. setItem("i", ++i); 
userName. value = ""; 
ShowOnLineUser( ); 
}; 
// 将 sessionStorage 中 的 在 线 用 户 以 表格 形式 显示 出 来 
function showOnLineUser( ){ 
Var result = ""; 
if(sessionStorage. length== 0){ 
result = result + "<tr>< td colspan = '2> 暂 无 用 户 </td></tr>"; 
}else{ 
for(var j= 0;j< sessionStorage. length; j++){ 
Var key = sessionStorage. key(j); 
if(key!= "i"){ 
var user = JSON. parsel( sessionStorage. getItem(key)); 
result = result + "<tr><td>" +user. userName 
+"</td><td>" + user. loginTime + "</td></tr >"; 


} 
var resultTable = document. getElementById("resultTable" ); 
resultTable. innerHTML = result; 
}; 
// 定 义 显示 时 间 的 方法 
function formateTime(myDate){ 
Var year = myDate. getFullYear(); 
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var month = myDate. getMonth() +1; 
var date = myDate. getDate( ); 
var hour = myDate. getHours(); 
var minute = myDate. getMinutes(); 
var dateString = year + "年 "+month+ "月 "+date+ "日 "+hour+":"+minute; 
return dateString; 

上 

showOnLineUser(); 

</script> 


上 述 代码 中 ,使 用 sessionStorage 来 缓存 用 户 输入 的 信息 。sessionStorage 只 能 用 来 存 
储 字符 串 , 对 于 结构 比较 复杂 的 数据 可 以 使 用 JSON 字符 串 格式 进行 存储 。 在 用 户 进 入 直 
播 间 时 ,将 该 用 户 名 和 登录 时 间 封 装 成 JSON 对 象 , 然 后 使 用 JSON. stringify() 方 法 将 其 转 
为 JSON 字符 串 格 式 存储 到 sessionStorage 中 。 在 显示 数据 时 ,将 sessionStorage 中 的 数据 
逐条 读 取出 来 ,并 使 用 JSON. parse( ) 方 法 将 JSON 字符 串 格式 的 数据 转 成 JSON 对 象 , 通 
过 表格 行 的 形式 输出 。 代 码 运行 结果 如 图 7-2 所 示 , 当 用 户 刷 新 页 面 时 ,可 以 继续 保持 现 有 
的 sessionStorage 信息 ; 当 用 户 关闭 浏览 器 时 ,sessionStorage 数据 也 随 之 消失 ; 当 用 户 再 
次 访问 该 页 面 时 ,sessionStorage 之 前 保存 的 数据 已 经 被 清空 。 
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图 7-2 sessionStorage 


使 用 F12 打开 Chrome 浏览 器 的 开发 者 工具 ,在 Application 选项 卡 的 Session Storage 
选项 中 ,查看 所 存储 的 用 户 在 线 信 息 , 如 图 7-3 所 示 。 











图 7-3 Chrome 开发 者 工具 窗口 
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在 Firefox 浏览 器 的 开发 者 工具 中 ,也 可 以 查看 Session Storage 中 所 存储 的 信息 ,如 


图 7-4 所 示 。 


只 口 二 口 入 口 由 、(] te GC- 0. =- EE 
= 号 Cookie 
@ 127001 


fruserName": 观 望 帮 ".loginTime":2017 年 4 月 19 日 1243" 
{userName":" 守 护 天 使","loginTime":"2017 年 4 月 19 日 12:43"} 
fuserName":" 要 在 远方 ""loginTime":"2017 年 4 月 19 日 12:43"} 
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对 于 具有 Session Storage 存储 功能 的 页 面 , 不 管 是 通过 本 地 访问 还 是 远程 访问 ， 
Firefox 和 Chrome 浏览 器 均 支 持 , 并 且 可 以 通过 开发 者 工具 (F12) 来 查看 已 保存 的 
数据 信息 。IE 浏览 器 只 有 10 以 上 版 本 才 支 持 Session Storage, 且 只 能 通过 远程 方 
式 访问 时 才 有 效 ,IE 浏览 器 的 开发 者 工具 中 目前 没有 提供 Session Storage 等 本 地 
存储 的 查看 功能 ,只 能 在 控制 台 通过 sessionStorage 命令 来 输出 所 存储 的 对 象 


7.2.2 Local Storage 
与 Session Storage 的 用 法 基本 相同 ,Local Storage 也 是 以 key/value 的 形式 来 存储 数 


据 , 区 别 在 于 Local Storage 中 的 数据 保存 在 浏览 器 客户 端的 存储 介质 上 , 且 没 有 时 间 限 制 。 
浏览 器 关闭 之 后 , 当 再 次 访问 该 页 面 时 ,数据 依然 存在 ,除非 用 户 或 程序 显 式 地 清除 该 数据 ， 
否则 数据 将 一 直 存 在 。 


< div class = "container"> 


【案例 7-3】 localStorage. html 


<dl> 
<dt>< img src= "images/peopleLive. jpg"</dt> 
< dd onclick = "addFavorites( 'people')"> 收 藏 </dd > 回 网 
</dl> 案例 视 
<dl> 
<dt>< img src = "images/longzhuLive. jpg"</dt> 
<dd onclick = "addFavorites( 'longzhu')"> 收 藏 </dd> 
</dl> 
<dl> 
<dt>< img src = "images/douyuLive. jpg"</dt > 
< dd onclick = "addFavorites( 'douyu')"> 收 藏 </dd> 
</dl> 
<dl> 
<dt>< img src= "images/yyLive. jpg"</dt> 
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< dd onclick = "addFavorites('YY') "> 收藏 </dd> 
</dl> 
</div> 
<hr /> 
<table width= "400px"> 
<caption> 直 播 平 台 收 藏 列表 </caption> 
<thead> 
<tr><th> 在 线 用 户 </th>< th width = "180px"> 收 藏 时 间 </th>< th> 操 作 </th></tr> 
</thead> 
<tbody id = "resultTable"> 
<tr><td colspan = "3"> 暂 未 收藏 </td></tr> 
</tbody> 
</table> 
< Script> 
// 清 除 localStorage 中 存储 的 数据 
//localStorage. clear( ); 
// 直 播 平 台数 据 集合 
var liveChannels = [ {name: ' 全 民 直 播 ', key: 'people'}， 
{name: ' 龙 珠 直播 ', key: 'longzhu'}， 
{name: ' 斗 鱼 直 播 ', key: 'douyu'}， 
{name: 'YY 直播 ',key: 'yy'}]; 
// 收 藏 直播 平台 
function addFavorites(channel){ 
var channel0bject = searchChannel (channel); 
Var currentChannel = { 
name:channelObject. name, 
key:channel, 
addTime: formateTime(new Date( )) 


} 
localStorage. setItem(channel, JSON. stringify(currentChannel) ); 
showFavorites( ) 

} 

// 显 示 已 收藏 的 直播 平台 信息 


function showFavorites(){ 
Var result = ""; 
if(localStorage. length == 0){ 
result = result + "<tr>< td colspan = '3 人 > 暂 未 收藏 </td></tr >"; 
}else{ 
for(var j= 0;j< localStorage. length; j++){ 
var key = localStorage. key(j); 
var favorite = JSON. parse( localStorage. getItem(key) ) ; 
result = result +"<tr><td>" + favorite. name 
+"</td>< td>" + favorite. addTime + "</td>"; 
result = result + "< td>< button onclick = deleteFavorite( '" 
+ favorite. key + "')> 删 除 </button></td></tr>" 


} 
var resultTable = document. getElementById("resultTable" ) ; 
resultTable. innerHTML = result; 
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上 

// 删 除 指定 的 收藏 

function deleteFavorite(key){ 
localStorage. removeItem(key); 
showFavorites( ); 


} 
// 在 数据 集合 中 进行 检索 
function searchChannel(channel){ 
for(var i in liveChannels){ 
if(liveChannels[i].key== channel){ 
return liveChannels[i]; 
} 
} 
} 
function formateTime(myDate){ 
var year = myDate. getFullYear(); 
Var month = myDate. getMonth() +1; 
var date = myDate. getDate( ); 
var hour = myDate. getHours(); 
var minute = myDate. getMinutes( ); 
var sencod = myDate, getSeconds(); 
var dateString = year + "年 "+ month+ "月 "+ date+ "日 "+ hour + ":" 
+minute+":"+ sencod; 
return dateString; 
} 
showFavorites( ); 
</script> 


上 述 代码 中 ,使 用 localStorage 来 存储 用 户 所 收藏 的 频道 信息 。 与 sessionStorage 相 
似 ,localStorage 只 能 存储 字符 串 ,复杂 的 信息 需要 以 JSON 字符 串 的 形式 来 存储 。 代 码 运 
行 结果 如 图 7-5 所 示 , 当 单 击 页 面 中 某 直播 平台 下 的 “收藏 按钮 时 ,将 该 直播 平台 的 信息 保 
存 到 localStorage 中 ,如 果 localStorage 已 经 存在 该 直播 平台 信息 则 对 数据 进行 更 新 。 单 击 
直播 平台 收藏 列表 中 的 “删除 ”按钮 ,将 删除 当前 行 对 应 的 信息 。 

















龙珠 直播 2017 年 4 月 19 日 16:36:22 
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图 7-5 localStorage 
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使 用 F12 打开 Chrome 浏览 器 开发 者 工具 ,在 Application 选项 卡 的 Local Storage 选项 
中 ,查看 用 户 所 收藏 的 直播 平台 信息 ,如 图 7-6 所 示 。 


€ Developer Tools - hapy/127.0.0.1.3020/3%6E7%AB%6AO%6EB%68A%8296E5%5BA9690%E736A0%81.、 [= [El 2 | 
Hements Console Sources Network Timeline Profies Application Security 为 


<|Key [Valuve 
douyu |[name 斗 重 直列“key"rdouyu"“addTime"r2017 年 4 月 19 昌 16:57:17] 








BB Moniest longzhu 
闪 Semvice Workers people | [fname 全 民 直 瑞 " "key";"people" addTime :2017 年 4 月 19 日 1636:55] 
曾 Clear storage | 


Storage 


httpW/127.0018020 
BE Session Storage 
@ IndexedDB 
县 websQL 
PO Cookies 


| 
va Local Storage | 
| 
| 





图 7-6 Chrome 开发 者 工具 窗口 


7.2.3 Storage Event 


当 sessionStorage 和 localStorage 所 存储 的 数据 发 生 改 变 时 ,将 会 触发 Storage 事件 。 
与 click 事件 不 同 的 是 , 当 Storage 数据 改变 时 将 会 触发 当前 域 下 其 他 窗口 的 Storage 事件 ， 
而 不 会 触发 当前 窗口 的 Storage 事件 ,该 事件 既 不 能 取消 也 不 能 冒 泡 。 

Storage Event 对 象 的 常用 属性 见 表 7-1。 


表 7-1 Storage Event 对 象 的 属性 














属 性 描 述 

key 只 读 属 性 ,表示 被 更 改 的 键 名 ,如果 key 为 空 表 示 clear() 被 调用 
oldValue 更 新 之 前 的 值 , 当 向 Storage 添加 数据 时 ,oldValue 为 null 
newValue 更 新 之 后 的 值 , 当 从 Storage 中 删除 数据 时 ,newValue 为 null 
url Storage 事件 触发 源 的 网 页 网 址 





在 案例 7-3 中 localStorage. html 页 面 的 基础 上 ,新 增 一 个 storageEvent. html 页 面 用 于 
演示 Storage Event 的 事件 响应 机 制 。 在 localStorage. html 页 面 中 , 单 击 “ 收 藏 * 或 “删除 ” 
按钮 时 ,将 在 storageEvent. html 页 面 中 触发 一 个 Storage 事件 ,代码 如 下 所 示 。 


【案例 7-4】 storageEvent. html 
<div class= "container"> 回 
<table width = "400px"> 

<caption > 直播 平台 收藏 列表 </caption> 






<thead > 回 
<tzr><th> 图 标 </th><th> 在 线 用 户 </th>< th width= "170px"> 收 藏 案例 视频 讲解 
时 间 </th></tr> 
</thead> 


<tbody id = "resultTable"> 
<tr><td colspan = "3"> 暂 未 收藏 </td></tr> 
</tbody> 
</table> 
</div> 
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<hr /Ss 
<div id= "operatorResult"></div> 
<script> 
// 为 窗 体 绑 定 storage 事件 
window. addEventListener(" storage" ,function(e){ 
ShowEventObject(e) 
showFavorites( ); 
D); 
// 显 示 已 收藏 的 直播 平台 信息 
function showFavorites(){ 
Var result = ""; 
if(localStorage. length == 0){ 
result = result + "< tr >< td colspan = '3?> 暂 未 收藏 </td></tr>"; 
Jelse{ 
for(var j= 0;j< localStorage. length; j++){ 
var key = localStorage. key(j); 
var favorite = JSON. parse( localStorage. getItem(key) ); 
result = result + "<tr><td>< img src= 'images/" 
+ favorite. key + "Live. jpg></td>"; 
result = result + "< td>" + favorite. name 
+"</td>< td>" + favorite. addTime + "</td></tr >"; 


} 
var resultTable = document. getElementById("resultTable" ); 
resultTable. innerHTML = result; 

; 

// 显 示 Storage Event 对 象 中 的 信息 

function showEventObject(event){ 
Var operatorResult = document. getElementById("operatorResult"); 
var result = "<p> StorageEvent 对 象 中 的 信息 如 下 : </p> event. key= " + event. key; 
result = result + "< br/> event. oldValue = " + event. oldValue; 
result = result + "< br/> event. newValue = " + event. newValue; 
operatorResult. innerHTML = result; 

} 

showFavorites( ); 

</script> 


在 浏览 器 中 同时 浏览 localStorage. html 和 storageEvent. html 两 个 页 面 ,在 
localStorage. html 页 面 ( 图 7-5) 中 , 单 击 “收藏 > 或 “删除 ? 锭 钮 时 将 会 触发 storageEvent. 
html 页 面 中 的 Storage 事件 ,在 事件 处 理 方法 中 使 用 Storage Event 对 象 来 传递 数据 ,在 “ 直 
播 平台 收藏 列表 ”中 对 数据 进行 更 新 。 当 再 次 “收藏 * 一 个 已 经 被 收藏 过 的 直播 平台 时 ， 
Storage Event 对 象 中 的 key、oldValue 和 newValue 属性 均 被 赋值 ,其 中 oldValue 表示 在 
localStorage 中 更 新 之 前 的 数据 ,newValue 表示 localStorage 中 更 新 之 后 的 数据 ,如 图 7-7 
所 示 。 
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7-7 Storage Event 


沪 尽管 使 用 Storage 比较 方便 ,但 当 大 量 数 据 需 要 保存 时 应 避免 使 用 Storage 来 存储 ， 
否则 会 有 灾难 性 的 后 果 。Storage 存储 在 安全 性 方面 也 有 一 定 的 局 限 性 ,敏感 数据 
在 存储 时 应 使 用 加 密 技 术 进 行 处 理 。 


7.3 Indexed Database 


本 地 数据 库 是 HTML 5 新 增 的 一 个 功能 ,用 于 在 客户 端 本 地 创建 一 个 数据 库 , 将 原来 
保存 在 服务 器 上 的 数据 库 中 的 数据 直接 保存 在 客户 本 地 ,大 大 减轻 了 服务 器 端的 压力 ,提高 
了 数据 访问 速度 。 

HTML 5 中 内 置 了 两 种 类 型 的 本 地 数据 库 : SQLite 和 IndexedDB。SQLite 数据 库 是 
一 种 使 用 SQL 语言 进行 访问 的 文件 型 SQL 数据 库 ; 而 Indexed 数据 库 是 一 种 轻 量 级 
NoSQL 数据 库 。 虽 然 SQLite 数据 库 在 一 些 浏览 器 (如 Chrome 6 十 ,Opera 10 十 和 Safari 5 十 
等 ) 中 得 到 支持 ,但 W3C 在 2010 年 11 月 宣布 暂停 对 该 规范 的 更 新 与 维护 ,转向 重点 对 
Web Storage 和 IndexedDB 规范 进行 维护 和 更 新 。 

与 SQLite 相 比 ,IndexedDB 是 一 种 轻 量 级 NoSQL 数据 库 , 在 索引 ,事务 处 理 以 及 高 性 
能 搜索 等 方面 更 具有 优势 。IndexedDB 是 一 种 低级 API, 用 于 在 客户 端 存储 大 量 结构 化 数 
据 ( 如 文件 或 blobs 数据 )。DOM 存储 一 般 用 于 存储 少量 的 数据 ,对 于 存储 量 较 大 的 结构 化 
数据 来 说 ,IndexedDB 提供 了 一 个 解决 方案 。 

与 传统 的 关系 型 数据 库 不 同 ,IndexedDB 通过 数据 存储 空间 ( 即 对 象 仓库 ) 实 现 对 数据 
的 存 取 。 在 数据 库 中 可 以 包含 一 个 或 多 个 对 象 仓 库 ( 相 当 于 关系 数据 库 中 的 表 ) ,每 个 对 象 
仓库 是 一 个 记录 集合 。 在 对 象 仓 库 中 ,每 条 记录 由 键 和 值 两 部 分 构成 ,数据 以 key/value 的 
形式 进行 保存 ,每 一 个 数据 都 有 键 名 , 且 键 名 不 能 重复 。 


篇 IndexedDB API 非常 强大 ,但 对 于 简单 的 应 用 来 说 过 于 复杂 ,读者 可 以 使 用 
localForage、ZangoDB 和 dexie. js 等 类 库 来 实现 ,以 上 各 种 类 库 均 可 在 https:// 


github. com 中 找到 相关 资源 。 
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7.3.1 IndexedDB API 


IndexedDB 为 同步 访问 和 异步 访问 分 别提 供 了 API 接口 。 同 步 API 仅 在 Web 
Workers 内 部 使 用 ,但 是 目前 还 没有 任何 浏览 器 对 其 提供 支持 。 异 步 API 在 Web Workers 
内 部 和 外 部 都 可 以 使 用 ,此 处 重点 介绍 IndexedDB 的 异步 API 接口 。 

IndexedDB 的 异步 API 接口 见 表 7-2。 


表 7-2 IndexedDB 的 异步 API 接口 



































接 口 描 述 
IDBFactory 由 全 局 对 象 IndexedDB 实现 的 接口 ,提供 对 数据 库 的 访问 人 口 
IDBRequest 用 于 向 数据 库 发 出 异步 访问 请 求 
IDBOpenDBRequest 用 来 接收 一 个 打开 数据 库 的 请 求 
IDBDatabase 数据 库 连接 ,通过 该 连接 来 获得 一 个 数据 库 事务 
IDBTransaction 数据 库 中 的 一 个 事务 处 理 
IDBObjectStore 数据 存储 空间 (对 象 仓库 ) 
IDBCursor 用 于 遍历 对 象 存储 空间 和 索引 
IDBCursorWithValue 用 于 遍历 对 象 存储 空间 和 索引 并 返回 游标 的 当前 值 
IDBIndex 索引 元 数据 ,针对 具有 索引 的 属性 值 进行 检索 
IDBKeyRange 用 于 定义 访问 键 值 的 范围 


下 面 针 对 IndexedDB 的 异步 API 接口 分 别 进行 介绍 。 

1. IDBFactory 接口 

在 浏览 器 中 使 用 IndexedDB 时 ,使 用 window. indexedDB 对 象 来 获得 数据 库 的 操作 入 
口 , 即 IDBFactory 类 型 的 对 象 。 

【示例 】 获得 indexedDB 对 象 


var indexedDB = window. indexedDB| | window. webkitIndexedDB| | window. mozIndexedDB 
|window. msIndexedDB; 


IDBFactory 接口 的 语法 格式 如 下 。 
【语法 】 


interface IDBFactory{ 
IDBOpenDBRequest open(DOMString name, [unsigned long long version]); 
IDBOpenDBRequest deleteDatabase(DOMString name) ; 
Short cmp(any first,any second) 

}; 


其 中 : 

。 open() 方 法 用 于 请 求 与 数据 库 建 立 连接 ,参数 name 表示 所 连接 数据 库 的 名 称 , 参 数 
version( 可 选 ) 表 示 数 据 库 的 版 本 号 。 

。 deleteDatabase() 方 法 用 于 删除 指定 的 数据 库 ,参数 name 表示 所 要 删除 的 数据 库 名 
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称 。 当 数据 库存 在 并 且 已 经 有 客户 端 连接 到 数据 库 时 ,删除 数据 库 操作 将 被 挂 起， 
直到 所 有 连接 释放 时 才 对 数据 库 进行 删除 。 删 除 操作 成 功 后 将 返回 一 个 空 对 象 。 
。 cmp() 方 法 用 来 比较 两 个 键 值 的 大 小 . 当 参 数 first < second 时 返回 一 1, 当 参数 first > 
second 时 返回 1 , 当 参 数 first 一 second 时 返回 0。 
2. IDBRequest 和 IDBOpenDBRequest 接口 
IDBRequest 接口 用 于 向 数据 库 发 起 一 个 异步 访问 请 求 ,语法 格式 如 下 。 
【语法 】 
interface IDBRequest:EventTarget{ 
readonly attribute any result; 
readonly attribute DOMException? error; 
readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source; 
readonly attribute IDBTransaction? transaction; 
readonly attribute IDBRequestReadyState readyState; 
// Event handlers: 
attribute EventHandler onsuccess; 
attribute EventHandler onerror; 
}; 


其 中 : 

。 属性 result 是 一 个 只 读 属 性 ,用 于 在 请 求 完成 时 返回 一 个 请 求 结果 , 当 请 求 失 败 时 
该 属性 为 undefined; 当 请 求 一 直 处 于 等 待 状态 , 则 抛 出 InvalidStateError 异常 。 

。 属性 error 是 一 个 只 读 属性 ,用 于 在 请 求 出 错时 返回 一 个 错误 信息 , 当 请 求 成 功 时 该 
属性 为 null; 当 请 求 一 直 处 于 等 待 状态 , 则 抛 出 InvalidStateError 异常 。 

。 属性 source 是 一 个 只 读 属性 ,在 请 求 成 功 时 该 属性 为 null; 当 请 求 被 拒绝 时 该 属性 
返回 一 个 IDBObijectStore IDBIndex 或 IDBCursor 类 型 的 对 象 。 

。 属性 transaction 是 一 个 只 读 属 性 ,表示 请 求 的 事务 , 当 请 求 为 创建 数据 库 连 接 时 该 
属性 是 一 个 upgrade 事务 。 

。 属性 readyState 是 一 个 只 读 属 性 , 当 请 求 处 于 等 待 状态 时 该 属性 为 pending, 当 请 求 
完成 时 该 属性 为 done。 

。 事件 onsuccess 表示 当 请 求 成 功 时 所 触发 的 事件 处 理 程序 。 

。 事件 onerror 表示 当 请 求 失败 时 所 触发 的 事件 处 理 程序 。 

IDBOpenDBRequest 接口 继承 自 IDBRequest 接口 ,用 于 创建 数据 库 连接 的 请 求 。 

IDBOpenDBRequest 接口 的 语法 格式 如 下 。 
【语法 】 


interface IDBOpenDBRequest: IDBRequest{ 
// Event handlers 
attribute EventHandler onblocked; 
attribute EventHandler onupgradeneeded; 
}; 


第 7 章 ”本 地 存储 /ns) 


其 中 : 

。 事件 onblocked 表示 当 请 求 阻塞 时 所 触发 的 事件 处 理 程序 ; 

。 事件 onupgradeneeded 表示 当 版 本 更 新 时 所 触发 的 事件 处 理 程序 。 

下 述 代 码 演 示 了 使 用 IDBFactory 对 象 来 创建 一 个 IDBOpenDBRequest 数据 库 连接 


【示例 】 创建 一 个 indexedDB 数据 库 连 接 请 求 


var dbRequest = indexedDB. open( dbName, dbVersion); 


上 述 代码 中 ,indexedDB 对 象 是 IDBFactory 类 型 ,dbRequest 对 象 是 IDBOpenDBRequest 类 
型 。 通 过 indexedDB 对 象 的 open() 方 法 来 创建 一 个 数据 库 连 接 请 求 。 


3. 


IDBDatabase 接口 


成 功 创建 一 个 数据 库 连 接 之 后 ,在 IDBOpenDBRequest 对 象 的 onsuccess 事件 处 理 方 
法 的 参数 event. target 中 包含 一 个 IDBDatabase 类 型 的 对 象 ,用 于 获取 成 功 连接 数据 库 时 
的 连接 对 象 。IDBDatabase 接口 的 语法 格式 如 下 。 

【语法 】 


interface IDBDatabase: EventTarget{ 


}; 


readonly attribute DOMString name; 
readonly attribute unsigned long long version; 
readonly attribute DOMStringList objectStoreNames; 
IDBTransaction transaction( (DOMString or sequence < DOMString >) storeNames, 
optional IDBTransactionMode mode = "readonly"); 
void close(); 
IDBObjectStore createObjectStore(DOMString name, 
optional IDBObjectStoreParameters options); 
void deleteObjectStore( DOMString name); 
// Event handlers: 
attribute EventHandler onabort; 
attribute EventHandler onclose; 
attribute EventHandler onerror; 
attribute EventHandler onversionchange; 


其 中 : 


属性 name 表示 数据 库 的 名 称 ; 

属性 version 表示 数据 库 的 版 本 号 ; 

属性 objectStoreNames 表示 数据 库 的 存储 仓库 集合 ; 

transaction() 方 法 用 于 创建 一 个 新 的 事务 ,事务 可 以 是 readonly 或 readwrite 类 型 ; 
createObjectStore() 方 法 用 于 创建 一 个 存储 仓库 ; 

deleteObjectStore() 方 法 用 于 删除 指定 的 存储 仓库 ,通常 在 数据 库 版 本 更 新 事件 
onversionchange 的 回调 方法 中 使 用 ,和 否则 会 抛 出 异常 “Failed to execute 
"deleteObjectStore' on 'IDBDatabase': The database is not running a version change 


transaction. ”; 
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。 close() 方 法 用 于 关闭 当前 数据 库 连 接 。 

下 述 代码 演示 了 使 用 IDBOpenDBRequest 对 象 来 创建 一 个 IDBDatabase 数据 库 连接 
对 象 。 

【示例 】 创建 一 个 connection 数据 库 连 接 


var indexedDB = window. indexedDB| | window. webkitIndexedDB| |window. mozIndexedDB 
| | window. msIndexedDB; 

var dbRequest = indexedDB. open( 'LiveBroadcast', 1); 

dbRequest. onsuccess = function(event){ 


var connection = event. target. result; // 获 取 连 接 成 功 时 的 数据 库 连接 
[ 


上 述 代 码 中 , 当 数 据 库 连 接 成 功 时 ,在 onsuccess 事件 回调 方法 中 通过 event. target 对 
象 来 获取 connection 数据 库 连接 对 象 。 

4. IDBTransaction 接口 

在 IndexedDB 数据 操作 过 程 中 ,通常 将 数据 操作 放 在 事务 (IDBTransaction) 中 进行 处 
理 , 当 事 务 处 理 过 程 中 发 生 异 常 时 ,整个 事务 操作 将 被 回 深 。IDBTransaction 接口 的 请 法 
格式 如 下 。 

【语法 】 


interface IDBTransaction: EventTarget{ 
readonly attribute DOMStringList objectStoreNames; 
readonly attribute IDBTransactionMode mode; 
[SameObject] readonly attribute IDBDatabase db; 
readonly attribute DOMException error; 
IDBObjectStore objectStore( DOMString name); 
void abort(); 
attribute EventHandler onabort; 
attribute EventHandler oncomplete; 
attribute EventHandler onerror; 

}; 


其 中 ， 

。 属性 objectStoreNames 表示 当前 事务 范围 中 的 对 象 仓库 名 称 列表 ; 

。 属性 mode 表示 当前 事务 模式 ,主要 包括 版 本 更 新 事务 (versionchange)、 只 读 事务 
(readonly) 和 读 写 事务 (readwrite) 三 种 模式 ; 

。 属性 db 表示 当前 事务 所 对 应 的 连接 对 象 ; 

objectStore() 方 法 用 于 返回 一 个 事务 范围 内 的 IDBObjectStore 对 象 ,通过 该 对 象 来 

完成 数据 的 增删 改 查 ; 

。 abort() 方 法 用 于 终止 事务 ; 

。 事件 oncomplete 表示 当 事 务 完成 时 所 触发 的 事件 处 理 程 序 ; 

。 事件 onabort 表示 当 事 务 终止 时 所 触发 的 事件 处 理 程序 ; 

。 事件 onerror 表示 当 事 务 发 生 错误 时 所 触发 的 事件 处 理 程序 。 

下 述 代码 演示 了 使 用 IDBDatabase 来 创建 一 个 IDBTransaction 事务 对 象 。 


【示例 】 创建 一 个 事务 对 象 


var indexedDB = window. indexedDB| | window. webkitIndexedDB| | window. mozIndexedDB 


| | window. msIndexedDB; 
var dbRequest = indexedDB. open( 'LiveBroadcast', 1); 
dbRequest. onsuccess = function(event){ 
Var connection = event. target. result; 
console. log( "数据 库 连 接 成 功 "); 
// 开 启 读 写 事务 
var tx = connection. transaction( 'users', ‘readwrite'); 
// 事 务 结束 时 所 要 执行 的 处 理 ( 事 务 结束 时 触发 ) 
tx. oncomplete = function(){ 
alert(" 数 据 保存 成 功 "); 
}; 
// 事 务 终止 时 所 要 执行 的 处 理 ( 事 务 终止 时 触发 ) 
tx. onabort = function(){ 
alert(" 数 据 保存 失败 "); 
}; 


5. IDBObjectStore 接口 
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(3) 


与 关系 数据 库 不 同 的 是 ,Indexed 数据 库 使 用 数据 存储 空间 (对 象 仓库 ) 来 存放 数据 ,一 
个 数据 库 中 可 以 包含 多 个 IDBObjectStore 类 型 的 对 象 仓库 。IDBObjectStore 接口 的 语法 


格式 如 下 。 
【语法 】 


interface IDBObjectStore{ 
attribute DOMString name; 
readonly attribute any keyPath; 
readonly attribute DOMStringList indexNames; 
readonly attribute IDBTransaction transaction; 
readonly attribute boolean autoIncrement; 
IDBRequest put(any value, optional any key); 
IDBRequest add(any value, optional any key); 
IDBRequest delete(any query); 
IDBRequest clear(); 
IDBRequest get(any query); 
IDBRequest getKey(any query); 
IDBRequest getAll(optional any query, optional unsigned long count); 


IDBRequest getAllKeys(optional any query, optional unsigned long count); 


IDBRequest count (optional any query); 
IDBRequest openCursor(optional any query, 

optional IDBCursorDirection direction = "next"); 
IDBRequest openKeyCursor(optional any query, 

optional IDBCursorDirection direction = "next"); 
IDBIndex index(DOMString name); 
IDBIndex createIndex(DOMString name, 
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}; 


(DOMString or sequence < DOMString >)keyPath, 
optional IDBIndexParameters options); 
void deleteIndex(DOMString name); 


其 中 ， 


属性 name 表示 对 象 仓 库 的 名 称 ; 

属性 keyPath 表示 对 象 仓库 中 记录 的 主键 ; 

属性 indexNames 表示 对 象 仓库 中 的 索引 名 称 列表 ; 

属性 transaction 表示 当前 对 象 仓库 所 对 应 的 事务 ; 

属性 autolncrement 用 于 返回 对 象 仓库 主键 的 生成 方式 ， 当主 键 自 动 生 成 时 该 属性 
返回 true, 和 否则 返回 false; 

put() 方 法 用 于 向 对 象 仓库 中 添加 记录 , 当 记录 存在 时 将 对 记录 进行 更 新 操作 ; 
add() 方 法 用 于 向 对 象 仓库 中 添加 记录 , 当 记 录 存 在 时 数据 添加 失败 并 抛 出 
ConstraintError 异常 ; 

delete() 方 法 用 于 根据 key 或 key range 从 对 象 仓库 中 删除 符合 条 件 的 数据 ; 
clear() 方 法 用 于 清空 整个 对 象 仓库 ; 

get() 方 法 用 于 从 对 象 仓库 中 返回 满足 key 或 key range 条 件 的 第 一 条 记录 的 
value 值 ; 

getKey() 方 法 用 于 从 对 象 仓库 中 返回 满足 key 或 key range 条 件 的 第 一 条 记录 的 
key 键 名 ; 

getAll() 方 法 用 于 从 对 象 仓 库 中 返回 所 有 满足 key 或 key range 条 件 的 记录 的 value 
集合 ; 

getAlIKeys() 方 法 用 于 从 对 象 仓库 中 返回 所 有 满足 key 或 key range 条 件 的 记录 的 
key 集合 ; 

count() 方 法 用 于 返回 满足 key 或 key range 条 件 的 记录 个 数 ; 

openCursor ( ) 方法 用 于 根据 查询 的 结果 集 返 回 一 个 游标 对 象 
(IDBCursorWithValue) ,通过 游标 的 移动 实现 数据 的 遍历 , 当 查询 条 件 为 null 时 将 
返回 所 有 记录 的 集合 , 当 查 询 的 结果 集 不 为 空 时 ,游标 指向 结果 集 的 第 一 条 记录 ; 
openKeyCursor() 方 法 用 于 根据 查询 的 结果 集 返 回 一 个 游标 对 象 (IDBCursor) ,而 结 
果 集 是 一 个 仅 包括 key 键 的 集合 ; 

index() 方 法 用 于 根据 索引 名 返回 一 个 IDBIndex 对 象 ; 

createIndex() 方 法 用 于 根据 name、keyPath 和 options 参数 来 创建 一 个 索引 ,并 返回 
一 个 IDBIndex 类 型 的 索引 对 象 ; 
deleteIndex() 方 法 用 于 根据 索引 名 来 删除 指定 的 索引 。 


下 述 代 码 演示 了 通过 IDBTransaction 对 象 来 创建 一 个 IDBObjectStore 数据 仓库 。 
【示例 】 创建 一 个 可 读 写 的 数据 仓库 


var tx = connection. transaction( storeName, 'readwrite'); 
var store = tx. objectStore( storeName); 
store. put( {name:"jCuckoo"}); 
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【示例 】 创建 一 个 只 读 的 数据 仓库 


var tx = connection. transaction( storeName, 'readonly ') ; 
Var store = tx. objectStore( storeName); 
// 根 据 条 件 进 行 查询 ,返回 一 个 结果 集 
var query = store. openCursor(); 
query. onsuccess = function(event){ 
// 获 得 游标 
Var cursor = event. target. result; 
| 


上 述 代 码 中 ,使 用 openCursor() 方 法 返回 一 个 符合 条 件 的 结果 集 , 当 方法 参数 为 空 时 ， 
将 返回 所 有 记录 的 集合 。 

6. IDBCursor 接口 

游标 (Cursor) 对 象 实现 了 IDBCursor 接口 ,通过 移动 游标 来 遍历 查询 的 结果 集 。 
IDBCursor 接口 的 语法 格式 如 下 。 

【语法 】 


interface IDBCursor{ 
readonly attribute (IDBObjectStore or IDBIndex) source; 
readonly attribute IDBCursorDirection direction; 
readonly attribute any key; 
readonly attribute any primaryKey; 
void advance([EnforceRange] unsigned long count); 
void continue(optional any key); 
void continuePrimaryKey(any key, any primaryKey); 
[NewObject] IDBRequest update(any value); 
[NewObject] IDBRequest delete( ); 

}; 


其 中 : 

。 属性 source 用 于 返回 游标 的 打开 方式 ; 

。 属性 direction 表示 游标 的 移动 方向 ,该 属性 取 值 可 以 为 next( 下 一 条 )、nextunique 
(下 一 条 不 同 的 记录 ) 、prev( 上 一 条 ) 和 prevunique( 上 一 条 不 同 的 记录 ); 

。 属性 key 用 于 返回 游标 行 所 对 应 的 键 ; 

。 属性 primaryKey 用 于 返回 游标 行 所 对 应 的 主键 ; 

advance() 方 法 用 于 在 查询 的 结果 集中 将 游标 向 后 移动 count 条 记录 ; 

continue() 方 法 用 于 在 查询 的 结果 集中 将 游标 向 后 移动 一 条 记录 ,或 将 游标 移 到 

key 记录 的 下 一 条 记录 ; 

。 continuePrimaryKey() 方 法 用 于 在 查询 的 结果 集中 将 游标 移动 并 指向 primaryKey 
所 对 应 的 记录 ; 

。 update() 方 法 用 于 更 新 游标 所 指向 的 记录 ; 

。 delete() 方 法 用 于 删除 游标 所 指向 的 记录 。 

下 述 代 码 演 示 了 使 用 openCursor() 来 获得 一 个 游标 对 象 。 
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【示例 】 获得 一 个 游标 对 象 


var tx = connection. transaction( storeName, 'readonly'); 
Var store = tx. objectStore( storeName); 
// 根 据 条 件 进 行 查询 ,返回 一 个 结果 集 
var query = store. openCursor(); 
query. onsuccess = function(event){ 
// 获 得 游标 
var cursor = event. target. result; 
// 当 结果 集 不 为 空 时 ,游标 默认 指向 结果 集 的 第 一 条 记录 
if(cursor){ 
console. log(cursor. value. id+ "," + cursor. value. name) 
// 游 标 移动 到 下 一 条 记录 


cursor. continue( ); 


7. IDBCursorWithValue 接口 
IDBCursorWithValue 接口 继承 自 IDBCursor 接口 ,具有 IDBCursor 接口 中 的 属性 和 
方法 , 除 此 之 外 ,还 提供 了 一 个 value 属性 。 与 IDBCursor 接口 相似 ,IDBCursorWithValue 


接口 也 能 够 实现 对 查询 的 结果 集 进行 遍历 ,语法 格式 如 下 。 
【语法 】 


interface IDBCursorWithValue: IDBCursor{ 
readonly attribute any value; 
}; 


其 中 ,属性 value 用 于 返回 游标 所 对 应 的 当前 value 值 。 

8. IDBIndex 接口 

与 关系 型 数据 库 中 的 索引 相似 ,Indexed 数据 库 中 的 索引 需要 通过 数据 记录 的 某 个 属 
性 值 来 创建 。 在 创建 索引 之 后 ,可 以 提高 对 数据 仓库 中 记录 检索 的 速度 。 在 关系 型 数据 库 
中 能 够 对 非 索引 字段 进行 检索 ,而 在 Indexed 数据 库 中 只 能 针对 索引 字段 进行 检索 。 
IDBIndex 接口 的 语法 格式 如 下 。 

【语法 】 


interface IDBIndex{ 
attribute DOMString name; 
[SameObject] readonly attribute IDBObjectStore objectStore; 
readonly attribute any keyPath; 
readonly attribute boolean multiEntry; 
readonly attribute boolean unique; 
[NewObject] IDBRequest get(any query); 
[NewObject] IDBRequest getKey(any query); 
[NewObject] IDBRequest getAll(optional any query, 
optional unsigned long count); 
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[NewObject] IDBRequest getAllKeys(optional any query, 
optional unsigned long count); 
[NewObject] IDBRequest count (optional any query); 
[NewObject] IDBRequest openCursor(optional any query, 
optional IDBCursorDirection direction = "next"); 
[NewObject] IDBRequest openKeyCursor(optional any query, 
optional IDBCursorDirection direction = "next"); 
}; 


其 中 : 

。 属性 name 用 于 设置 或 返回 索引 的 名 称 ; 

。 属性 objectStore 用 于 说 明 当 前 索引 所 隶属 的 对 象 仓库 ; 

。 属性 keyPath 用 于 返回 索引 所 对 应 的 keyPath 项 ; 

。 当 索 引 使 用 multiEntry 标志 时 ,multiEntry 属性 返回 true; 

。 当 索 引 使 用 unique 标志 时 ,unique 属性 返回 true; 

IDBIndex 接口 的 其 他 方法 请 参见 IDBObjectStore 接口 中 方法 的 说 明 。 

下 述 代 码 演示 了 使 用 IDBObjectStore. createIndex() 方 法 来 创建 一 个 索引 对 象 。 
【示例 】 获得 一 个 索引 对 象 


Var name = "userNameIndex"; 
var keyPath = "userName"; 
var optionalParameters = { 
multiEntity:false, 
unique:false 
}; 
Var index = store. createIndex(name keyPath, optionalParameters); 


9. IDBKeyRange 接口 

通过 索引 来 检索 数据 时 ,使 用 IDBKeyRange 对 象 来 设置 所 要 检索 的 数据 key 的 范围 。 
IDBKeyRange 接口 的 语法 格式 如 下 。 

【语法 】 


interface IDBKeyRange{ 
readonly attribute any lower; 
readonly attribute any upper; 
readonly attribute boolean lowerOpen; 
readonly attribute boolean upperOpen; 
static IDBKeyRange only(any key); 
static IDBKeyRange lowerBound(any lower, optional boolean open = false); 
static IDBKeyRange upperBound(any upper, optional boolean open = false); 
static IDBKeyRange bound(any lower,any upper, 
optional boolean lowerOpen = false, optional boolean upperOpen = false); 
boolean includes(any key); 
}; 


其 中 : 
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。 属性 lower 表示 Range 范围 的 下 限 , 未 设置 时 为 undefined; 

。 属性 upper 表示 Range 范围 的 上 限 , 未 设置 时 为 undefined; 

。 当 Range 范围 中 包含 下 限 值 时 ,属性 lowerOpen 为 false, 否 则 为 true; 
。 当 Range 范围 中 包含 上 限 值 时 .属性 upperOpen 为 false, 和 否则 为 true; 
。 only() 方 法 用 于 生成 一 个 仅 包含 一 个 key 的 Range 范围 ; 

。 lowerBound() 方 法 用 于 生成 一 个 仅 有 下 限 、. 无 上 限 的 Range 范围 ; 
upperBound() 方 法 用 于 生成 一 个 仅 有 上 限 .无 下 限 的 Range 范围 ; 

。 bound() 方 法 用 于 生成 一 个 既 有 下 限 又 有 上 限 的 Range 范围 ; 

。 includes() 用 于 判断 key 是 否 位 于 Range 范围 内 。 

下 述 代码 演示 了 Range 范围 的 几 种 创建 方式 。 

【示例 】 创建 Range 范围 





var boundRange = IDBKeyRange. bound( 10, 20, false, true); //[10,20) 


var onlyRange = IDBKeyRange. only(35); //[35] 
var lowerRange = IDBKeyRange. lowerBound(10, false); //[10, …) 
var upperRange = IDBKeyRange. upperBound(100, false); //( ,100] 


7.3.2 Indexed 数据 操作 
与 关系 型 数据 库 操作 相似 ,Indexed 数据 库 操作 也 分 为 数据 修改 和 数据 查询 两 大 类 型 ， 


其 中 数据 修改 的 操作 步骤 如 下 。 


(1) 获得 IndexedDB 对 象 ; 

(2) 向 数据 库 发 出 连接 请 求 ， 

(3) 获得 数据 连接 请 求 对 象 connection; 

(4) 获得 事务 对 象 transaction; 

(5) 获得 数据 仓库 对 象 objectStore; 

(6) 对 数据 进行 添加 、 修 改 或 删除 等 操作 。 

下 述 代码 演示 了 向 Indexed 数据 库 中 添加 记录 的 过 程 。 
【案例 7-5】 saveData. html 


//1. 获 得 IndexedDB 对 象 
var indexedDB = window. indexedDB| | window. webkitIndexedDB| | window. mozIndexedDB 
| | window. msIndexedDB; 
//2. 向 数据 库 发 出 连接 请 求 
var dbRequest = indexedDB. open( 'testDB', 1); 
dbRequest. onsuccess = function(event){ 
//3. 获 得 数据 连接 请 求 对 象 connection 
var connection = event. target. result; // 获 取 连 接 成 功 时 的 数据 库 连接 
//4. 获得 事务 对 象 transaction 
Var tx = connection. transaction( 'test', 'readwrite'); 
//5. 获 得 数据 仓库 对 象 objectStore 
Var objectStore = tx. objectStore( 'test') ; 
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//6. 对 数据 进行 添加 
objectStore. add( {user:"jCuckoo"}); 
}; 
dbRequest. onupgradeneeded = function(event){ 
Var connection = event. target. result; 
// 创 建 数据 仓库 test 
Var store = connection. createObjectStore("test",{ 
keyPath: "id", 
autoIncrement :true 
1); 
} 
dbRequest. onerror = function(event){ 


}; 


使 用 游标 对 Indexed 数据 库 中 的 数据 进行 遍历 ,操作 步骤 如 下 。 
(1) 获得 IndexedDB 对 象 ; 

(2) 向 数据 库 发 出 连接 请 求 ; 

(3) 获得 数据 连接 请 求 对 象 connection; 

(4) 获得 事务 对 象 transaction; 

(5) 获得 数据 仓库 对 象 objectStore; 

(6) 获得 数据 查询 请 求 对 象 query; 

(7) 获得 游标 对 象 cursor; 

(8) 使 用 游标 遍历 数据 。 

下 述 代码 演示 了 Indexed 数据 库 的 数据 遍历 过 程 。 
【案例 7-6】 iteratorData. html 


//1. 获得 IndexedDB 对 象 
var indexedDB = window. indexedDB| | window. webkitIndexedDB| |window.mozIndexedDB 
| |window. msIndexedDB; 
//indexedDB. deleteDatabase( 'testDB'); 
//2. 向 数据 库 发 出 连接 请 求 
var dbRequest = indexedDB. open( ‘testDB', 1); 
dbRequest. onsuccess = function(event){ 
//3. 获得 数据 连接 请 求 对 象 connection 
var connection = event. target. result; // 获 取 连 接 成 功 时 的 数据 库 连接 
//4. 获得 事务 对 象 transaction 
var tx = connection. transaction( 'test', 'readonly'); 
//5. 获得 数据 仓库 对 象 objectStore 
Var objectStore = tx. objectStore( 'test'); 
/1/6. 获得 数据 查询 请 求 对 象 query 
Var query = objectStore. openCursor( ); 
query. onsuccess = function(event){ 
//1.cursor. value 
Var cursor = event. target. result; 


//8. 使 用 游标 遍历 数据 
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if(cursor){ 
console. log(cursor. key + " " + JSON. stringify(cursor. value)); 
cursor. continue( ); 


}; 
dbRequest. onupgradeneeded = function(event){ 
Var connection = event. target. result; 
// 创 建 数据 仓库 test 
var store = connection. createObjectStore("test", { 
keyPath: "id", 
autoIncrement :true 
1); 
有 
dbRequest. onerror = function(event){ 
}; 


下 述 代 码 演 示 了 使 用 Indexed 数据 库 实现 直播 频道 的 喜好 评价 ,用 户 可 以 对 喜欢 的 直 
播 频道 献花 ,或 对 不 喜欢 的 频道 扔 鸡蛋 。 将 用 户 献花 或 扔 蛋 的 数量 存储 到 浏览 器 客户 端的 
Indexed 数据 库 中 ,然后 使 用 cursor 游标 来 遍历 用 户 评价 的 数据 集合 并 显示 出 来 。 

【案例 7-7】 presentFlowers. html 


< h3 > 请 选择 您 喜欢 的 直播 栏目 </h3 > 
<hr /> 
<div class = "channelDiv"> 
<dl id = "peopleLive"> 
<dt>< img src= "images/peopleLive. jpg"></dt> 
< dd> 
< input type = "button" class = "flowerBtn hvr ~ grow" 
onclick = "presentGift( 'peopleLive', 'flower', this)"/> 
< span> 0 </span> 
< input type = "button" class = "eggBtn hvr - grow" 
onclick = "presentGift( 'peopleLive', 'egg', this)"/>< span> 0 </span> 
</dd> 
</dl> 
<dl id= "longzhuLive"> 
<dt>< img src= "images/longzhuLive. jpg"></dt > 
<dd> 
< input type = "button" class = "flowerBtn hvr — grow" 
onclick = "presentGift( 'longzhuLive', 'flower', this)"/>< span> 0 </span> 
< input type = "button" class = "eggBtn hvr ~ grow" 
onclick = "presentGift( 'longzhuLive', ‘egg', this)"/>< span> 0 </span> 
</dd> 
</dl> 
<dl id= "douyuLive"> 
<dt>< img src= "images/douyuLive. jpg"></dt > 
<dd> 
< input type = "button" class = "flowerBtn hvr — grow" 
onclick = "presentGift( 'douyuLive', 'flower', this)"/>< span> 0 </span> 
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< input type = "button" class = "eggBtn hvr — grow" 
onclick = "presentGift( 'douyuLive', ‘egg', this)"/>< span> 0 </span> 
</dd> 
</dl> 
<dl id= "yyLive"> 
<dt>< img src = "images/yyLive. jpg"></dt> 
<dd> 
< input type = "button" class = "flowerBtn hvr — grow" 
onclick = "presentGift( 'yyLive', 'flower', this)"/>< span> 0 </span> 
< input type = "button" class = "eggBtn hvr — grow" 
onclick = "presentGift( 'yyLive', ‘egg', this)"/>< span> 0 </span> 


</dd> 
</dl> 
</div> 
< Script> 
Var dbName = "LiveBroadcast"; // 数 据 库 名 
var dbVersion= 1; // 版 本 号 
var storeName = "channelStore"; // 数 据 仓库 名 称 
var connection = null; // 数 据 库 连接 


//1. IDBFactory 
var indexedDB = window. indexedDB| |window. webkitIndexedDB 
| |window. mozIndexedDB| | window. msIndexedDB; 
// 删 除 指定 的 数据 库 , 关闭 浏览 器 重新 打开 后 会 发 现 所 删除 的 数据 库 已 经 不 存在 了 
//indexedDB. deleteDatabase( dbName); 
// 数 据 库 初始 化 
function init(){ 
//2. IDBRequest 
var dbRequest = indexedDB. open( dbName, dbVersion); 
dbRequest. onsuccess = function(event){ 
connection = event. target. result;  // 获 取 连 接 成 功 时 的 数据 库 连接 
console. log( "数据 库 连接 成 功 ."); 
loadGiftDatal( ); 
}; 
dbRequest. onerror = function(event){ 
console. log( 数据 库 连接 失败 ! '); 
}; 
dbRequest. onupgradeneeded = function(event){ 
connection = event. target. result; 
if(!connection. objectStoreNames. contains( storeName) ){ 
var optionalParameters={ 
keyPath: "id", 
autoIncrement :true 
}; 
Var objectStore = connection 
.CreateObjectStorel( storeName, optionalParameters); 
console. log( "对象 仓 库 创建 成 功 !"); 
} 
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Var tx = event. target. transaction; 
console. log( "数据 库 版 本 更 新 成 功 ! 版 本 " + event. oldVersion+" => 版 本 " 
+ event. newVersion); 
}; 
} 
// 加 载 Indexdb 数据 库 中 的 数据 
function loadGiftData( ){ 
Var nodeList = document. getElementsByTagName( "dl1"); 
Var tx = connection. transaction( storeName, 'readonly'); 
Var objectStore = tx. objectStore( storeName); 
Var query = objectStore. openCursor(); 
query. onsuccess = function(event){ 
Var cursor = event. target. result; 
if(cursor){ 
var data = cursor. value; 
for(var i in nodeList){ 
if(nodeList[i]. id== data. channel){ 
var spanList = nodeList[i].getElementsByTagName("span"); 
SpanList[0]. innerHTML = data. flowerNum; 
spanList[1]. innerHTML = data. eggNum; 


} 


cursor. continue( ); 


} 
// 鲜 花 与 鸡蛋 
function presentGift(channel, type, object){ 
Var tx = connection. transaction( storeName, 'readwrite'); 
Var objectStore = tx. objectStore( storeName); 
Var query = objectStore. openCursor( ); 
query. onsuccess = function(event){ 
Var cursor = event. target. result; 
try{ 
// 当 记录 存在 时 ,对 数据 进行 更 新 
Var num= 0; 
if(cursor&&cursor. value. channel == channel){ 
var data = cursor. value; 
if(type == "flower"){ 
data. flowerNum = data. flowerNum + 1; 
nunm = data. flowerNum; 
}else{ 
data. eggNum = data. eggNum + 1; 
num = data. eggNum; 
} 
cursor. update( data); 
object. nextSibling. innerHTML = num; 
return; 
jelse if(cursor){ 
cursor. continue( ); 


第 7 章 ”本 地 存储 (ss) 


}else{ 
// 当 记录 不 存在 时 ,插入 一 条 新 纪录 
var flowerNum = 0, eggNum = 0; 
num=1; 
if(type == "flower"){ 
flowerNum= 1; 
}else{ 
eggNum= 1; 
y 
var data={ 
Channel :channel, 
flowerNum:flowerNum, 
eggNunm: eggNum 
} 
objectStore. put (data); 
object. nextSibling. innerHTML = num; 
return; 
上 
}finally{ 
cursor = null; 
} 
! 
} 
window. onload = init; 
</script> 


上 述 代码 运行 结果 如 图 7-8 所 示 。 在 页 面 加 载 时 ,init() 方 法 用 于 对 数据 连接 进行 初始 
化 ; 当 连 接 请 求 成 功 时 获取 一 个 数据 库 连 接 对 象 , 然 后 调用 loadGiftData( ) 方 法 将 Indexed 
数据 库 中 的 数据 加 载 并 在 页 面 中 显示 ; 当 数 据 请 求 失 败 时 ,打印 错误 提示 信息 ; 在 第 一 次 
初始 化 或 数据 版 本 更 新 时 ,通过 onupgradeneeded 事件 回调 方法 来 创建 一 个 LiveBroadcast 
数据 库 或 对 数据 库 版 本 进行 更 新 。 














图 7-8 献花 扔 蛋 


在 loadGiftData() 方 法 中 ,使 用 cursor 游标 对 数据 库 中 的 数据 进行 检索 ,并 将 检索 到 的 
数据 显示 到 页 面 中 ; cursor. continue() 方 法 用 于 将 cursor 游标 指向 下 一 个 符合 条 件 的 数 
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据 , 通 过 cursor. value 来 获得 游标 所 指向 记录 的 value 值 。 
在 presentGift() 方 法 中 ,参数 channel 表示 将 要 献花 或 扔 鸡蛋 的 直播 频道 。 当 单 击 页 
面 中 的 鲜花 或 鸡蛋 时 ,鲜花 或 鸡蛋 的 数值 增加 1 ,并 在 Indexed 数据 库 中 对 数据 进行 更 新 。 
通过 Chrome 浏览 器 的 开发 者 工具 ,查看 Application 选项 卡 的 Storage/IndexedDB 选 
项 ,发 现 创 建 了 一 个 LiveBroadcast 数据 库 ,其 中 包含 一 个 channelStore 数据 仓库 ,在 该 仓库 


Elements Console Sources Network Timeline Profles Application Security Audits 


| 4 [Sarttrom key | 
日 Key (Key path: "id] Vaue 
0 1 vobject 
channel: “peopleLive” 








次 semice Workers 
画 Cear storage 


Storage 
33 Local storage 
P83 Session Storage 
v IndexedDB 
v 攻 LiveBroadcast - http//127.0.0.1:3020 i 
BE channelStore flowerNun: 6 
WebsQL id: 4 
P@ Cookies 


channel: "yyLive” 
:3 














7-9 使 用 Chrome 开发 者 工具 查看 IndexedDB 


7.3.3 Indexed 检索 


在 数据 检索 时 ,除了 使 用 游标 对 数据 检索 外 ,还 可 以 根据 索引 对 数据 进行 检索 。 与 关系 
型 数据 库 的 索引 相似 ,Indexed 数据 库 中 的 索引 也 需要 根据 记录 的 某 个 属性 来 创建 ,通过 索 
引 可 以 有 效 地 提高 数据 的 检索 速度 。 

使 用 索引 对 Indexed 数据 库 中 的 数据 进行 检索 ,操作 步骤 如 下 。 

(1) 获得 IndexedDB 对 象 ; 

(2) 向 数据 库 发 出 连接 请 求 ; 

(3) 获得 数据 连接 请 求 对 象 connection; 

(4) 获得 事务 对 象 transaction; 

(5) 获得 数据 仓库 对 象 objectStore; 

(6) 获得 数据 仓库 中 指定 的 索引 index; 

(7) 通过 索引 对 象 index 的 get() 和 getAll() 方 法 直接 获得 索引 数据 ; 也 可 以 通过 索引 
对 象 index 来 获得 一 个 数据 查询 请 求 对 象 query, 在 query 请 求 对 象 的 onsuccess 回调 方法 
中 获得 游标 对 象 cursor 对 数据 进行 检索 和 遍历 。 

下 述 代 码 演 示 了 使 用 索引 来 遍历 Indexed 数据 库 中 的 数据 。 首先 修改 
presentFlowers. html 代码 ,在 onupgradeneeded 事件 处 理 方 法 中 添加 一 段 创 建 索 引 的 
代码 。 

【案例 7-8】 presentFlowers. html 


~… 此 处 代码 省 上 略 … 
//1. IDBFactory 
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var indexedDB = window. indexedDB| | window. webkitIndexedDB| | window. mozIndexedDB 
| |window. msIndexedDB; 
// 使 用 以 下 语句 删除 原来 的 数据 库 
indexedDB. deleteDatabase( dbName); 
// 数 据 库 初始 化 
function init(){ 
//2.IDBRequest 
var dbRequest = indexedDB. open(dbName, dbVersion) ; 
dbRequest. onsuccess = function(event){ 
connection = event. target. result; // 获 取 连 接 成 功 时 的 数据 库 连接 
console. 1og( "数据 库 连接 成 功 . ") 
loadGiftData( ) 
】 
dbRequest. onerror = function(event){ 
console. log( 数据 库 连 接 失败 ! ); 
}; 
dbRequest. onupgradeneeded = function(event){ 
connection = event. target. result; 
if(!connection. objectStoreNames. contains( storeName)){ 
var optionalParameters = { 
keyPath: "id", 
autoIncrement :true 
}; 
var objectStore = connection 
.CreateObjectStore( storeName, optionalParameters); 
objectStore. createIndex( 'channelIndex', 'channel', {unique:true}); 
console. log( "对象 仓 库 创 建成 功 !"); 
} 
Var tx = event. target. transaction; 
console. 1og( "数据 库 版 本 更 新 成 功 ! 版 本 " 
+ event. oldVersion + " => 版 本 " + event. newVersion); 
}; 
“此 处 代码 省 略 … 
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通过 presentFlowers. html 页 面 中 的 献 “ 鲜 花 ” 或 扔 “鸡蛋 ”操作 来 增加 直播 频道 的 鲜花 
和 鸡蛋 的 数量 ,然后 在 loadDataByIndex. html 页 面 中 对 各 直播 频道 的 鲜花 和 鸡蛋 的 数据 进 


行 统计 ,代码 如 下 所 示 。 
【案例 7-9】 loadDataByIndex. html 


<div> 
<table width= "500px"> 
<caption> 直 播 平台 赠送 列表 </caption> 
< thead > 
<tr><th> 频 道 ID </th>< th> 频 道 名 称 </th><th> Logo </th> 
<th> 鲜 花 数 量 </th>< th> 鸡 蛋 数量 </th></tr> 
</thead> 
< tbody id= "resultTable"></tbody> 
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</table> 

</div> 

<dialog id= "myDialog"> 
频道 ID: < span id= "idSpan"></span>< br/> 
频道 名 称 : < span id= "channelSpan"></span><br/> 
鲜花 数量 : < span id = "flowerSpan"></span><br/> 
鸡蛋 数量 : < span id= "eggSpan"></span><br/><br/> 
< input type = "button" value = "关闭 窗口 " 

onclick = "this. parentElement. close()"/> 





</dialog> 
<script> 
var dbName = "LiveBroadcast"; // 数 据 库 名 
var dbVersion= 1; // 版 本 号 
var storeName = "channelStore"; // 数 据 仓库 名 称 
Var connection = null; // 数 据 库 连接 对 象 


function openIndexedDB(){ 
var indexedDB = window. indexedDB| | window. webkitIndexedDB 
| |window. mozIndexedDB| | window. msIndexedDB; 
// 创 建 数据 库 连接 请 求 
var dbRequest = indexedDB. open(dbName, dbVersion); 
dbRequest, onerror = function(event){ 
console. 1og( ' 数 据 库 连 接 失败 !' + event. currentTarget, error. message); 
}; 
// 请 求 成 功 时 
dbRequest. onsuccess = function(event){ 
// 获 得 数据 库 连接 对 象 
connection = event. target. result; 
console. lo0g( "数据 库 连 接 成 功 "); 
getMultipleData( ); 
} 
dbRequest. onupgradeneeded = function(event){ 
connection = event. target. result; 
if(!connection. objectStoreNames. contains( storeName)){ 
var optionalParameters = { 
keyPath:"id", 
autoIncrement :true 
}; 
var objectStore = connection 
.createObjectStore( storeName, optionalParameters); 
objectStore. createIndex( 'channelIndex', 'channel'， 
{unique:true} ); 
console. log(" 对 象 仓库 创 建成 功 !"); 
} 
alert(" 数 据 库 版 本 更 新 成 功 ! 版 本 " 
+ event. oldVersion +" => 版 本 " + event. newVersion); 
}; 
} 
// 根 据 索引 查找 指定 的 记录 
function getChannelByIndex(channelName){ 
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var tx = connection. transaction( storeName, 'readonly'); 
Var objectStore = tx. objectStore( storeName); 
var index = objectStore. index("channelIndex" ); 
index. get(channelName) . onsuccess = function(event){ 
Var channel = event. target. result; 
document. getElementById(" idSpan" ) . innerHTML = channel. id; 
document. getElementById("channelSpan"). innerHTML = channel. channel; 
document. getElementById("flowerSpan" ) . innerHTML = channe1. flowerNum; 
document. getElementById("eggSpan" ) . innerHTML = channel. eggNum; 
var myDialog = document. getElementById("myDialog" ); 
myDialog. show( ); 


b 
// 根 据 索 引 查找 符合 条 件 的 多 条 记录 
function getMultipleData( ){ 
var tx = connection. transaction( storeName, 'readonly'); 
Var objectStore = tx. objectStore( storeName); 
var index = objectStore. index("channelIndex" ); 
var query = index. openCursor(null, IDBCursor. prev); 
query. onsuccess = function(event){ 
Var cursor = event. target. result; 
var resultTable = document. getElementById("resultTable"); 
if(cursor){ 
var channel = cursor. value; 
var row = resultTable. insertRow(resultTable. rows. length); 
var idCell = row. insertCell(0); 
var channelNameCell] = row. insertCell(1); 
Var presenterNameCell] = row. insertCell(2); 
var flowerCell = row. insertCell(3); 
var eggCell = row. insertCell(4); 
idCell. innerHTML = channel. id; 
channelNameCell. innerHTML = "<a href = '#'" 
+ "onclick = getChannelByIndex('" + channel. channel + "')>" 
+ channel. channel + "</a>"; 
presenterNameCell. innerHTML = "< img src = 'images/" 
+ channel. channel + ". jpg>"; 
flowerCell. innerHTML = channel. flowerNum; 
eggCell. innerHTML = channel. eggNum; 
cursor. continue( ); 


} 


window. onload = function(){ 
openIndexedDB( ) ; 
} 


</script> 


上 述 代 码 中 ,getChannelByIndex() 方 法 用 于 根据 索引 字段 来 检索 一 条 符合 条 件 的 记 
录 ,getMultipleData() 方 法 根据 索引 来 获取 游标 对 象 , 然 后 通过 游标 来 遍历 数据 。 代 码 运行 
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结果 如 图 7-10 所 示 。 代 码 中 根据 直播 频道 名 称 来 创建 了 一 个 索引 channelIndex, 所 以 网 页 
中 表格 的 数据 是 根据 “频道 名 称 ” 升 序 排列 的 。 
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图 7-10 直播 频道 的 赠送 列表 


单 击 某 个 频道 名 称 , 将 弹出 该 频道 的 详细 信息 ,如 图 7-11 所 示 。 


频道 ID : 3 
频道 名 称 : peopleLive 
鲜花 数量 : 5 


鸡 重 数量 : 7 





图 7-11 直播 频道 的 详细 信息 


本 章 总 结 


Cookie 是 一 种 在 客户 端 保持 会 话 跟踪 的 解决 方案 ,在 浏览 器 客户 端 保存 用 户 会 话 信 
息 ,以 便服 务 端 对 客户 端 身份 进行 识别 。 

HTML 5 中 新 增 了 Web Storage 存储 机 制 ,是 一 种 对 Cookies 存储 机 制 的 改善 。 
Web Storage 用 于 在 浏览 器 客户 端 保存 数据 ,数据 存储 形式 分 为 Session Storage 和 
Local Storage 两 种 。 

Session Storage 将 数据 保存 在 Session 对 象 中 ,Local Storage 将 数据 保存 在 客户 端 
的 硬件 设备 中 。 

HTML 5 中 内 置 了 两 种 类 型 的 本 地 数据 库 : SQLite 和 IndexedDB。SQLite 数据 库 
是 一 种 使 用 SQL 语言 进行 访问 的 文件 型 SQL 数据 库 ,而 IndexedDB 是 一 种 轻 量 级 
NoSQL 数据 库 。 

与 传统 的 关系 型 数据 库 不 同 ,IndexedDB 通过 数据 存储 空间 ( 即 对 象 仓 库 ) 实 现 对 数 
据 的 存 取 。 

在 浏览 器 中 使 用 Indexed 数据 库 时 ,需要 通过 window. indexedDB 来 获得 数据 库 的 
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操作 入 口 。 


。 针对 IndexedDB 数据 操作 时 ,通常 将 数据 操作 放 在 事务 (IDBTransaction) 中 进行 处 


理 ; 当 事 务 处 理 过 程 中 发 生 异 常 时 ,整个 事务 操作 将 被 回 滚 。 


。 游标 (Cursor) 对 象 实现 了 IDBCursor 接口 ,可 以 通过 移动 游标 来 遍历 查询 的 结 


果 集 。 


。 与 关系 型 数据 库 中 的 索引 相似 ,Indexed 数据 库 中 的 索引 需要 通过 数据 记录 的 某 个 


属性 值 来 创建 。 在 创建 索引 之 后 ,可 以 提高 对 数据 仓库 中 记录 检索 的 速度 。 


本 章 练习 


加 


下 列 选项 中 关于 Cookie 技术 说 法 错误 的 是 
A. Cookie 所 存储 的 信息 量 较 少 

B.Cookie 存储 在 客户 端 ,存在 一 定 的 安全 问题 

C. Cookie 技术 存在 众多 缺点 ,应 该 完全 废弃 

D. Cookie 本 质 上 是 以 文本 方式 进行 存储 的 


. 关于 Web Storage 说 法 正确 的 是 。 


A. Web Storage 用 于 在 浏览 器 客户 端 保存 数据 

B. Web Storage 数据 存储 形式 分 为 Session Storage 和 Local Storage 两 种 形式 

C. 当 Session 失效 时 ,Session Storage 存储 的 数据 也 将 随 之 丢失 

D. Local Storage 将 数据 保存 在 客户 端的 硬件 设备 中 ,在 浏览 器 关闭 后 数据 仍然 
存在 


. 关于 Storage 接口 说 法 错误 的 是 


A. length 属性 为 只 读 属性 ,用 于 返回 Storage 对 象 中 的 数据 项 数量 

B. size 属性 为 只 读 属性 ,用 于 返回 Storage 对 象 中 的 数据 项 数量 

C. Storage 中 的 数据 以 key/value 的 形式 进行 保存 

D. 当 sessionStorage 或 localStorage 中 的 数据 发 生 改变 时 ,会 触发 Storage 事件 


. 下 列 关于 IndexDB 说 法 正确 的 是 


A. Indexed 数据 库 是 一 种 轻 量 级 NoSQL 数据 库 

B. Indexed 数据 库 是 通过 对 象 仓库 实现 对 数据 的 存 取 

C. 在 Indexed 数据 库 中 可 以 包含 一 个 或 多 个 对 象 仓库 ,每 个 对 象 仓库 是 一 个 记录 
集合 

D. 在 对 象 仓库 中 ,每 条 记录 是 由 键 和 值 两 部 分 构成 ,数据 以 key/value 形式 保存 


. 关于 Storage Event 对 象 说 法 错误 的 是 疝 


A. key 属性 是 一 个 只 读 属 性 ,用 来 表示 被 更 改 的 键 名 
B. oldValue 属性 表示 更 新 之 前 的 值 

C. currentValue 属性 表示 当前 值 

D. newValue 属性 表示 更 新 之 后 的 值 


. 关于 IDBCursor 接口 说 法 错误 的 是 


A. 属 性 direction 表示 游标 的 移动 方向 
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B. 
C. 
D. 


delete() 方 法 用 于 删除 游标 所 指向 的 记录 
update() 方 法 用 于 更 新 游标 所 指向 的 记录 
insert() 方 法 用 于 向 结果 集中 插入 一 条 记录 


7. 下 列 关于 IDBKeyRange 接口 说 法 错误 的 是 a 
A. 属 性 lower 表示 Range 范围 的 下 限 


B. 
C. 
D. 


onlyO 〇 方法 用 于 生成 一 个 仅 包含 一 个 key 的 Range 范围 
bound() 方 法 用 于 生成 一 个 既 不 包含 下 限 又 不 包含 上 限 的 Range 范围 
includes() 用 于 判断 key 是 否 位 于 Range 范围 内 


8. 使 用 索引 从 Indexed 数据 库 中 检索 数据 ,操作 步骤 是 。 


A. 
B. 
CC 
.获得 事务 对 象 transaction 

.获得 数据 连接 请 求 对 象 connection 

. 通过 索引 对 象 index 的 get() 和 getAll() 方 法 来 获得 数据 ,然后 进行 遍历 操作 
. 获得 数据 仓库 中 指定 的 索引 index 


向 数据 库 发 出 连接 请 求 
获得 数据 仓库 对 象 objectStore 
获得 IndexedDB 对 象 





文件 API1 


人 AS 本 章 目标 


。 了解 沙 箱 模型 概念 。 

。 熟练 使 用 File AP1 接口 对 文件 和 目录 进行 操作 。 
。 能 够 使 用 FileWriter API 接口 保存 文件 。 

。 熟悉 FileSystem API 接口 。 

。 能够 使 用 FileSystem API 对 文件 进行 操作 。 

。 能 够 使 用 FileSystem API 对 目录 进行 操作 。 


8.1 文件 API 概述 


对 Web 应 用 而 言 ,JavaScript 代码 和 插件 都 存在 一 定 风险 ,特别 是 故意 设计 侵入 浏览 器 
的 代码 更 加 危险 ,通过 侵入 代码 或 者 浏览 器 漏洞 来 获取 主机 的 管理 权限 ,这 对 主机 系统 来 说 
是 非常 危险 的 ,所 以 不 仅 要 保证 网 页 自身 不 存在 危险 ,还 要 保证 浏览 器 和 操作 系统 不 存在 安 
全 漏洞 ,从 而 有 效 保 障 Web 应 用 的 安全 性 。 

由 于 网 页 可 能 存在 各 种 有 意 的 或 无 意 的 攻击 .所 以 浏览 器 通常 认为 网 络 中 的 网 页 是 不 
安全 的 。 这 时 希望 有 一 种 机 制 能 够 将 网 页 的 运行 限制 在 一 个 特定 的 环境 中 ,使 其 只 能 访问 
有 限 的 功能 ,从 而 保证 系统 的 安全 ,即使 在 浏览 器 的 泻 染 引擎 被 攻击 的 情况 下 ,也 不 可 能 获 
取 主 机 系统 中 的 任何 权限 ,这 一 思想 称 为 浏览 器 的 沙 箱 (sandbox) 模 型 。 

沙 箱 模型 在 一 定 程度 上 保证 了 系统 的 安全 ,但 同时 Web 应 用 程序 也 受到 一 定 的 限制 ， 
不 能 像 C/S 架构 的 客户 端 那 样 灵活 地 对 本 地 文件 进行 操作 。 如 果 Web 应 用 程序 能 够 对 本 
地 文件 进行 读 取 和 写 入 ,程序 功能 将 变 得 更 加 强大 。 

在 HTML 5 中 ,Web 应 用 程序 可 以 请 求 临时 或 永久 的 存储 空间 来 访问 客户 端 文件 。 
临时 存储 空间 使 用 相对 比较 方便 ,但 有 一 定 的 硬盘 空间 限制 ,在 使 用 临时 存储 空间 时 不 需要 
提示 用 户 , 具 有 一 定 的 便利 性 ,但 是 临时 存储 空间 中 的 数据 可 能 会 被 用 户 不 慎 清 除 , 如 当 用 
户 在 清除 浏览 器 数据 时 临时 存储 空间 中 的 数据 也 一 起 被 清除 了 。HTML 5 中 新 增 了 
FileSystem API, 用 于 将 数据 永久 保存 在 磁盘 的 文件 系统 中 ,该 空间 下 的 数据 相对 比较 安 
全 ,必须 由 用 户 通过 应 用 程序 来 删除 ,而 不 会 在 用 户 不 知情 的 情况 下 被 清除 。 
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8.2 File API 


HTML 5 规范 中 提供 了 File API, 主要 包括 Blob、 File、 FileList、 FileReader 和 
BlobURL 接口 。Blob 对 象 表示 原始 的 二 进 制 数据 ,File 对 象 表 示 用 户 选 择 的 一 个 文件 ， 
FileList 对 象 表 示 用 户 选择 的 文件 列表 ,FileReader 对 象 用 来 将 文件 读 取 到 内 存 中 ,而 URL 
对 象 为 Blob( 或 File) 二 进 制 数据 提供 一 个 可 访问 的 URL 地 址 ,以 便 在 Web 页 面 中 引用 
Blob 类 型 的 数据 。 


车 


RD 在 HTML 5 规范 中 ,File Reader API 接口 用 于 读 取 数 据 ,该 接口 中 包含 File、 
好 FileList\FileReader 和 BlobURL 等 接口 。FileWriter API 接口 用 于 向 文件 中 写 入 
数据 ,其 中 包含 BlobBuilder、FileSaver 和 FileWriter 接口 。FileWriter API 接口 目 
前 并 没有 得 到 浏览 器 厂商 的 支持 ,有 关 细 节 读 者 可 以 关注 https://www. w3. org/ 
TR/file-writer-api/ 网 站 。 


8.2.1 ”Blob 接口 


HTML 5 规范 中 新 增 了 Blob 接口 ,用 来 表示 二 进 制 数据 。Blob 接口 的 语法 格式 如 下 。 
【语法 】 


interface Blob{ 
readonly attribute unsigned long long size; 
readonly attribute DOMString type; 
readonly attribute boolean isClosed; 
Constructor( sequence <( ArrayBuffer or ArrayBufferView or Blob or DOMString)> 
blobParts, optional BlobPropertyBag options) 
Blob slice([Clamp] optional long long start, optional long long end, 
optional DOMString contentType); 
}; 


其 中 ， 

。 size 属性 用 于 返回 Blob 的 字 节 长 度 ; 

。 type 属性 用 于 返回 Blob 的 MIME 类 型 ,如 果 是 未 知 类 型 则 返回 一 个 空 字符 串 ， 

。 isClosed 属性 用 于 返回 Blob 数据 是 否 处 于 关闭 状态 ; 

。 Constructor() 方 法 是 一 个 构造 方法 ,参数 数量 为 0 一 2 个 ,其 中 参数 blobParts 是 一 
个 ArrayBuffer、ArrayBufferView、Blob 或 DOMString 类 型 的 序列 ,参数 options 表 
示 所 创建 Blob 对 象 的 媒体 类 型 ; 

slice() 方 法 用 于 从 Blob 数据 中 截取 部 分 数据 并 返回 一 个 新 的 Blob 对 象 , 参 数 数量 
为 0 一 3 个 ,其 中 参数 start 表示 截取 的 开始 位 置 ,参数 end 表示 截取 的 结束 位 置 (不 
包含 end 位 置 ) ,参数 contentType 用 于 设置 所 创建 的 Blob 对 象 的 媒体 类 型 。 

下 述 代 码 演 示 了 使 用 Blob 的 构造 方法 来 创建 一 个 Blob 对 象 。 
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【示例 】 使 用 Blob 构造 方法 来 创建 Blob 对 象 


var buffer = new ArrayBuffer(1024); 

Var shorts = new Uint16Array(1,2,3); 

var bytes = new Uint8Array(1,2); 

var bl = new Blob( ); 

var b2 = new Blob([" 欢 迎 来 到 新 闻 直 播 间 "], {type:"text/plain;charset = UTF - 8"}); 
var b3 = new Blob(['<a href = "##"> 欢 迎 来 到 布谷 鸟 直播 间 </a>'], {type: 'text/html1'}); 
Var b4 = new Blob([b2, shorts]); 

var b5 = new Blob( [buffer, b2, b3, bytes]); 


下 述 代 码 演 示 了 使 用 Blob 的 slice 〇 方法 创建 一 个 新 的 Blob 对 象 。 
【示例 】 slice() 方 法 的 使 用 


var blob = new Blob(['<a href =" 井 "> 欢迎 来 到 布谷 鸟 直播 间 </a>'], {type:'text/html'} ) 
var newBlob = blob. slice(13, 23, {type: 'text/html'}); 


下 述 代 码 演示 了 Blob 对 象 的 size 和 type 属性 的 用 法 。 
【案例 8-1】 blob. html 


选择 文件 : < input type = "file" id = "myFile" multiple/> 
< input type= "button" value= "显示 文件 信息 "onclick = "getInfoFromFile()"/>< hr/> 
文件 大 小 : < span id = "fileSize"></span> 字 符 < br/> 
文件 类 型 : < span id= "fileType"></span> 
<script> 
function getInfoFromFile(){ 
var files = document. getElementById( "myFile").files; 
document. getElementById( "fileSize"). innerHTML = files[0]. size; 
document. getElementById("fileType"). innerHTML = files[0].type; 
} 


</script > 


上 述 代码 运行 结果 如 图 8-1 所 示 。 当 用 户 单 击 “ 选 择 文件 ”按钮 时 ,返回 一 个 FileList 
对 象 ,其 中 包含 1 一 nn 个 File 对 象 。 由 于 File 接口 继承 自 Blob 接口 ,所 以 File 接口 拥有 
Blob 接口 中 所 有 的 属性 和 方法 。 关 于 File 接口 和 FileList 接口 将 在 后 续 小 节 中 进行 介绍 。 





C | @ 127.00.1:8020/ 刘 源码 /chapter0 女 | 和 


选择 文件 : | 选择 文件 | DingTalk exe 旦 示 文件 信息 


文件 大 小 : 695736 字 符 
文件 类 型 : application/x-msdownload 








图 8-1 Blog 对 象 的 属性 


8.2.2 File 接口 
在 HTML 4 中 ,使 用 File 控件 一 次 只 能 选择 一 个 文件 ; 而 在 HTML 5 中 ,可 以 通过 
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multiple 属性 来 设置 File 控件 ,从 而 一 次 能 够 选择 多 个 文件 ; 在 File 控件 中 ,用 户 所 选择 的 
文件 都 是 File 类 型 的 文件 对 象 。File 接口 的 语法 格式 如 下 。 
【语法 】 


interface File:Blob{ 
readonly attribute DOMString name; 
readonly attribute long long lastModified; 
Constructor( sequence <(Blob or DOMString or ArrayBufferView or ArrayBuffer)> 
fileBits, DOMString fileName, optional FilePropertyBag options) 
}; 


其 中 : 

。 name 属性 用 于 返回 文件 的 名 称 ; 

。 lastModified 属性 用 于 返回 文件 的 最 后 修改 时 间 ; 

。 Constructor() 方 法 是 一 个 构造 方法 ,参数 数量 为 0 一 3 个 ,其 中 参数 fileBits 是 一 个 
Blob .DOMString、ArrayBufferView 或 ArrayBuffer 类 型 的 序列 ,用 于 生成 文件 的 
内 容 ; 参数 fileName 表示 所 创建 文件 的 名 称 ; 参数 options 由 type 和 lastModified 
两 部 分 组 成 ,用 于 设置 文件 的 MIME 类 型 和 创建 时 间 。 

下 述 代 码 演 示 了 使 用 File 对 象 读 取 文 件 的 基本 信息 和 创建 一 个 新 的 文件 。 

【案例 8-2】 file. html 


选择 文件 : < input type = "file" id = "myFile" multiple/> 
< input type = "button" value= "显示 文件 信息 " onclick = "getInfoFromFile()"/>< hr/> 
文件 名 称 : < span id = "fileName"></span>< br/> 
文件 大 小 : < span id = "fileSize"></span> 字 符 < br/> 
文件 类 型 : < span id = "fileType"></span>< br/> 
修改 时 间 : < span id = "lastModified"></span>< hr/> 
< input type = "button" value = "创建 一 个 文件 " onclick = "createFile()"/><br/> 
< Script> 
function getInfoFromFile(){ 
var files = document. getElementById("myFile"). files; 
if(files!= null&&files. length!= 0){ 
document. getElementById("fileName"). innerHTML = files[0].name; 
document. getElementById("fileSize"). innerHTML = files[0]. size; 
document. getElementById("fileType"). innerHTML = files[0].type; 
document. getElementById("lastModified"). innerHTML 
= new Date(files[0]. lastModified); 
Jelse{ 
alert(" 请 选择 文件 !"); 
} 
} 
function createFile( ){ 
var date = new Date(2013, 12,5,16,23,45,600); 
var file= new File([" 斗 鱼 栏目 正在 直播 美食 联赛 "], "myText. txt"， 
{type:"text/plain", lastModified:date} ); 
document. getElementById( "fileName"). innerHTML = file. name; 
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document. getElementById( "fileSize"). innerHTML = file. size; 
document. getElementById("fileType"). innerHTML = file. type; 
document. getElementById( "lastModified"). innerHTML 
= new Date(file. lastModified); 
D 
</script > 


上 述 代 码 运 行 结果 如 图 8-2 所 示 。 选 择 文件 后 , 单 击 “显示 文件 信息 ”按钮 ,将 被 选中 文 
件 的 名 称 、 大 小 、 类 型 和 最 后 修改 时 间 显 示 出 来 。 单 击 “ 创 建 一 个 文件 ”按钮 ,使 用 new 
File() 方 式 来 创建 一 个 文件 ,同时 为 文件 指定 文件 的 名 称 、MIME 类 型 和 修改 时 间 , 并 将 指 





: | 选择 文人 | 未 选择 任何 文件 旦 示 文件 信息 





: myText.txt 

: 36 字符 

: text/plain 

; Sun Jan 05 2014 16:23:45 GMT+0800 (中 国标 准时 间 ) 





创建 一 个 文件 | 





8-2 File 对 象 的 使 用 


人 UTF-8 是 Unicode 的 一 种 实现 方式 ,对 字 节 结构 有 特殊 要 求 。 对 于 Unicode 编码 ， 
3、 汉字 的 范围 是 0x4E00 一 0x9FA5, 而 标准 UTF-8 编码 中 需要 4 个 字 节 ,修正 后 的 
UTF-8 编码 则 需要 6 个 字 节 ( 即 3 个 字符 )。 


8.2.3 FileList 接口 


在 表单 中 使 用 File 控件 上 传 文件 时 ,使 用 FileList 对 象 来 接收 用 户 所 选择 的 文件 列表 ， 
无 论 用 户 选择 一 个 文件 还 是 多 个 文件 ,FileList 对 象 都 是 File 类 型 的 对 象 集合 。FileList 接 
口 的 语法 格式 如 下 。 
【语法 】 
interface FileList{ 
readonly attribute unsigned long length; 


getter File item(unsigned long index); 
}; 


其 中 : 

。 length 属性 用 于 返回 FileList 集合 中 File 对 象 的 数量 ; 

。 item() 方 法 用 于 获取 第 index 位 置 的 文件 对 象 。 

下 述 代码 演示 了 使 用 FileList 对 象 来 显示 用 户 所 选择 的 文件 列表 。 
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【案例 8-3】 fileList. html 


<a href = "javascript:;" class= "file"> 选 择 文件 
< input type= "file" id= "myFile" multiple> 
</a><hr/> 
< input type = "button" value = "item() 方 法 遍历 " onclick = "iteratorByItem()"/> 
< input type = "button" value = "files 属性 遍历 " onclick = "iteratorByFile()"/><hr/> 
<div id= "listItemDiv" class = "basic - grey"><h3 > item() 方 法 遍历 结果 如 下 : </h3></div> 
<div id= "fileListDiv" class = "basic - grey"><h3> files 属性 遍历 结果 如 下 : </h3 ></div> 
< Script> 
function iteratorBYItem( ){ 
var fileList = document. getElementById("myFile"). files; 
var listItemDiv = document. getElementById("listItemDiv"); 
for(var i=0;i<fileList. length;i++){ 
var file = fileList. item(i); 
listItemDiv. innerHTML += file. name + "< br/>"; 
} 
} 
function iteratorByFile(){ 
var fileList = document. getElementById("myFile"). files; 
var fileListDiv = document. getElementById("fileListDiv"); 
for(var i=0;i<fileList. length;i++){ 
var file= fileList[i]; 
fileListDiv. innerHTML += file. name + "< br/>"; 
} 
} 


</script> 


上 述 代码 中 ,使 用 fileList 对 象 来 接收 用 户 所 选择 的 文件 列表 ,fileList 对 象 是 一 个 File 
类 型 的 对 象 集合 ; 在 File 集合 中 ,使 用 item() 方 法 或 数组 下 标 形式 来 获取 指定 位 置 的 File 
对 象 。 代 码 运行 结果 如 图 8-3 所 示 , 单 击 * 选 择 文件 ”按钮 ,弹出 一 个 文件 选择 对 话 框 ,在 对 
话 框 中 选择 多 个 文件 后 , 单 击 “item() 方 法 遍历 ”和 *files 属性 遍历 ”按钮 ,所 产生 的 结果 完全 
相同 。 

















itemO 方 法 遍历 法 果 如 下 : files 展 性 遍历 结果 如 下 : 





fioweroljpg iowerotjpg 
iowerozjpg flowero2jpg 


| foweroajpg flowero3jpg 





图 8-3 FileList 对 象 的 使 用 
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8.2.4 FileReader 接口 


FileReader 接口 用 于 将 磁盘 中 的 文件 读 入 内 存 中 ,能 够 使 用 二 进 制 数 据 、 文 本 、 
DataURL 和 ArrayBuffer 等 格式 来 读 取 文件 。FileReader 接口 的 语法 格式 如 下 。 
【语法 】 
interface FileReader :EventTarget{ 
const unsigned short EMPTY = 0; 
const unsigned short LOADING = 1; 
const unsigned short DONE = 2; 
readonly attribute unsigned short readyState; 
readonly attribute (DOMString or ArrayBuffer) result; 
readonly attribute DOMError error; 
void readAsArrayBuffer(Blob blob); 
void readAsText (Blob blob, optional DOMString label); 
void readAsDataURL( Blob blob); 
void abort(); 
attribute EventHandler onloadstart; 
attribute EventHandler onprogress; 
attribute EventHandler onload; 
attribute EventHandler onabort; 
attribute EventHandler onerror; 
attribute EventHandler onloadend; 
}; 


其 中 : 

。 属 性 readyState 用 于 返回 FileReader 的 当前 状态 , FileReader 具有 EMPTY、 
LOADING 和 DONE 三 种 状态 。 

。 属性 result 将 根据 FileReader. readAsXxx() 方 法 来 返回 一 个 DOMString 类 型 的 
Blob 数据 、ArrayBuffer 数组 或 者 空 对 象 。 

。 属性 error 用 于 返回 FileReader 读 取 数 据 时 发 生 的 DOMError 错误 。 

。 readAsArrayBuffer( ) 方 法 是 一 个 异步 方法 ,用 于 读 取 Blob 数据 并 返回 一 个 
ArrayBuffer 对 象 ;在 数据 读 取 时 ,如 果 FileReader 处 于 LOADING 状态 则 直接 抛 出 
InvalidStateError 异常 ; 如 果 Blob 处 于 关闭 状态 时 ,将 对 FileReader 对 象 的 error 
属性 进行 赋值 并 抛 出 InvalidStateError 异常 ; 如 果 FileReader 能 够 正常 读 取 数 据 ， 
此 时 将 readyState 属性 设置 为 LOADING 状态 。 

。 readAsText() 方 法 的 功能 与 readAsArrayBuffer() 方 法 基本 相同 ,区 别 在 于 返回 的 
数据 是 文本 类 型 ; 参数 label 用 于 设置 读 取 文 件 时 的 编码 方式 ,以 解决 乱码 问题 。 

。 readAsDataURL() 方 法 用 于 读 取 Blob 对 象 或 File 对 象 中 的 内 容 , 当 读 取 操作 完成 

时 ,readyState 属性 变 为 DONE; 在 onloadend 事件 处 理 方法 中 ,result 属性 将 包含 一 

个 data: URL 格式 的 字符 串 ( 即 所 读 取 的 文件 内 容 ) 表 示 ; 与 Canvas. toDataURL() 方 

法 作用 相似 ,可 以 将 data:URL 赋 给 img 元 素 的 src 属性 ,从 而 将 图 像 显 示 出 来 。 

abort() 方 法 用 于 终止 数据 的 读 取 并 返回 null。 
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FileReader 接口 中 提供 了 EMPTY、LOADING 和 DONE 三 种 状态 ,其 中 EMPTY 表 
示 已 经 创建 FileReader 对 象 、. 且 未 开始 读 取 数据 的 状态 ; LOADING 表示 正在 读 取 数据 的 
状态 ; DONE 表示 整个 Blob 数据 读 取 完 毕 后 的 状态 。 

除 此 之 外 ,FileReader 接口 拥有 一 套 完整 的 事件 模型 ,用 于 捕获 读 取 文件 时 的 各 种 状 
态 , 具 体 见 表 8-1。 





表 8-1 FileReader 事件 机 制 




















事件 描 述 
onloadstart 数据 读 取 操作 开始 时 触发 
onprogress 数据 读 取 进行 中 
onload 数据 读 取 成 功 完成 时 触发 
onabort 数据 读 取 中 断 时 触发 
onerror 数据 读 取 错 误 时 触发 
onloadend 数据 读 取 完 成 时 触发 ,无 论 读 取 成 功 还 是 失败 都 会 触发 该 事件 





下 述 代码 演示 了 使 用 FileReader 接口 读 取 本 地 文件 。 
【案例 8-4】 fileReader. html 


<div> 
< input type = "file" id= "myFile" multiple class= "file" value = 
"选择 文件 "/>< br/> 
< input type = "button" value = "加 载 图 像 (DataURL)" he 
onclick = "readFileAsDataURL()"/> Se 
< input type = "button" value = " 读 取 文本 (Text)" onclick= 案例 视频 讲解 
"readFileAsText()"/> 
< input type = "button" value = "加 载 文件 (ArrayBuffer)" 
onclick = "readFileAsArrayBuffer()"/>< hr/> 
<div id= "resultDiv"></div> 
</div> 
< Script> 
var resultDiv = document. getElementById("resultDiv" ); 
function readFileAsDataURL( ){ 
var file= document. getElementById("myFile"). files[0]; 
if(!/image\/\w+/.test(file. type)){ 
alert(" 请 确保 所 选择 的 文件 是 图 像 类 型 !") 


return false; 





} 
Var reader = new FileReader( ); 
reader. readAsDataURL(file); 
reader. onload = function(event){ 
resultDiv. innerHTML = "< img src = '" + this. result +"'/>"; 
} 
} 
function readFileAsText(){ 
var file = document. getElementById("myFile").files[0]; 
if(!/text\/\w+/.test(file. type)){ 
alert(" 请 选择 文本 类 型 的 文件 !") 


return false; 
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var reader = new FileReader( ); 

reader. readAsText (file,"gb2312" ); 

reader. onload = function(event){ 
resultDiv. innerHTML = this. result; 


} 
function readFileAsArrayBuffer(){ 
var file = document. getElementById("myFile").files[0]; 
Var reader = new FileReader( ); 
reader. readAsArrayBuffer(file); 
reader. onload = function(event){ 
//var arrayBuffer = event. target. result; 
Var arrayBuffer = this. result; 
var result2String = String. fromCharCode. apply(null, 
new Uint8Array(arrayBuffer)); 
resultDiv. innerHTML = result2String; 
} 
} 
</script > 


上 述 代码 中 ,使 用 readAsDataURL() 方 法 来 读 取 图 像 文件 ,在 onload 回调 方法 中 将 
Data:URL 类 型 的 result 数据 赋值 给 img 元 素 的 src 属性 ,从 而 实现 将 本 地 图 像 加 载 到 网 页 
中 ; readAsText() 方 法 用 于 读 取 本 地 文本 文件 ,参数 gb2312 用 于 解决 在 加 载 文本 时 的 乱码 
问题 ; readAsArrayBuffer() 方 法 用 于 将 文件 以 二 进行 数据 形式 加 载 到 内 存 中 。 代 码 运行 结 
果 如 图 8-4 所 示 , 在 选择 图 像 文 件 之 后 , 单 击 “ 加 载 图 像 ”按钮 ,将 选择 的 图 像 将 加 载 到 页 面 
中 ; 当选 择 文 本 文件 时 , 单 击 “ 读 取 文 本 ”按钮 将 文本 内 容 加 载 到 页 面 中 。 


@ 127.0.0.1:8020/ 章 节 源 码 /chapter08/fle 女 | WW : © |0 127 0 0 L8020/W TR/chapter08 /fie 3 省 





选择 文件 | p1jpg | 造 泽 文件 | fleReader bd 
加 载 图 像 (DataURL ) ] | 迹 取 文本 ( Text ) | | 加 载 文件 ( AmayBufier ) | | 加载 图 像 ( DataURL ) | | 该 取 文 本 ( Text ) | | 加 载 文 件 ( ArayBufier ) | 











FileReader 接 口中 提供 了 EMPTY、LOADING 和 DONE 三 种 状 
态 ,其 中 EMPTY 表 示 已 经 创建 FileReader 对 象 、 且 未 开始 读 取 数 
据 的 状态 ; RS DONE 表 示 整 个 
Blob 数 据 读 取 完 毕 | 





图 8-4 FileReader 对 象 的 使 用 


8.2.5 URL 接口 


URL 接口 用 于 创建 Blob 或 File 对 象 的 URL 引用 地 址 ,所 创建 的 URL 形式 如 blob: 
http://127. 0. 0. 1:8020/9aa84362-ed63-4af7-b3d6-53b8d0d13f66。URL 接口 的 语法 格式 
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如 下 。 
【语法 】 
interface URL{ 


static DOMString createObjectURL(Blob blob); 
static void revokeObjectURL(DOMString url); 


}; 

其 中 : 

。 createObjectURL() 方 法 是 一 个 静态 方法 ,用 于 为 blob 对 象 随机 生成 一 个 URL 引 
用 地 址 ; 


revokeObjectURL() 方 法 是 一 个 静态 方法 ,用 于 将 createObjectURL() 方 法 所 创建 
的 URL 失效 ,使 其 无 法 继续 使 用 。 


下 述 代码 演示 了 使 用 URL 接口 为 File 对 象 创建 一 个 URL 引用 地 址 ,从 而 隐藏 文件 的 
真实 路 径 。 


【案例 8-5】 url. html 


<div> 


< input type= "file" id= "myFile" multiple class= "file" value= "选择 文件 "人 />< br/> 
< input type = "button" value = "加 载 图 像 ”onclick = "createObjectURL()"/> 
< input type = "button" value = "撤销 图 像 " onclick = "revokeObjectURL()"/>< hr/> 
< img id= "myImage" /> 
</div> 
< Script> 
Var blobURLref = ""; 
var myImage = document. getElementById( 'myImage'); 
function createObjectURL( ){ 
var file = document. getElementById( 'myFile'). files[0]; 
if(file){ 
blobURLref = URL. createObjectURL(file); 
myImage. src = blobURLref; 
} 
} 
function revokeObjectURL( ){ 
URL. revokeObjectURL( blobURLref ); 
myImage. src = blobURLref; 
} 


</script> 


上 述 代码 运行 结果 如 图 8-5 所 示 ,在 文件 选择 框 选取 文件 之 后 , 单 击 “ 加 载 图 像 " 按 钮 
时 ,使 用 createObjectURLO 〇 方法 为 newsBroadcast. jpg 图 像 随机 生成 一 个 URL 引用 地 址 : 
blob:http://127. 0. 0. 1: 8020/4f5dd6cf-5597-42b6-93d5-1b5ee0aac222, 并 将 URL 引用 地 


址 赋 给 img 元 素 的 src 属性 ,从 而 实现 图 像 的 加 载 。 当 单 击 “ 撤 销 图 像 * 按 钮 时 ,页 面 将 提示 
img 元 素 的 引用 地 址 无 效 。 
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8-5 URL 接口 的 使 用 


8.3 FileWriter API 


在 HTML 5 规范 中 ,FileWriter API 不 是 一 个 “独立 ”存在 的 规范 ,需要 依赖 于 File API 
和 FileSystem API。FileWriter API 中 包括 BlobBuilder、 FileSaver 和 FileWriter 接口 。 
BlobBuilder 接口 用 于 创建 Blob 对 象 ; FileSaver 接口 中 提供 了 abort() 方 法 和 一 系列 事件 


监听 方式 ; FileWriter 继承 自 FileSaver 接口 ,并 提供 了 write() ,seek() 和 truncate() 等 数据 
处 理 方 法 。 


1. BlobBuilder 接口 
在 HTML 5 中 ,使 用 BlobBuilder 接口 来 创建 Blob 二 进 制 对 象 ,该 接口 的 语法 格式 
如 下 。 
【语法 】 


interface BlobBuilder{ 
Blob getBlob(optional DOMString contentType); 
void append( DOMString text, optional DOMString endings); 
void append(Blob data); 
void append(RrrayBuffer data); 
] 


其 中 ， 


。 getBlob() 方 法 用 于 返回 一 个 含有 BlobBuilder 内 容 的 Blob 对 象 ; 


。 append () 方 法 用 于 将 ArrayBuffer、Blob 或 DOMString 类 型 的 数据 追加 到 
BlobBuilder 对 象 中 。 


由 于 浏览 器 对 BlobBuilder 接口 的 支持 度 不 高 , 且 操 作 相对 复杂 ,目前 Firefox 和 
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Chrome 浏览 器 已 将 其 废除 ,建议 使 用 Bob 接口 来 代替 BlobBuilder 接口 。 


2. FileSaver 接口 


FileSaver 接口 用 于 实现 文件 的 保存 ,该 接口 提供 了 一 系列 的 abort() 方 法 和 事件 监听 
方式 。FileSaver 接口 的 语法 格式 如 下 。 


【语法 】 


interface FileSaver:EventTarget{ 


void abort(); 


const unsigned short INIT= 0; 

const unsigned short WRITING = 1; 
const unsigned short DONE = 2; 
readonly attribute unsigned short readyState; 
readonly attribute DOMError error; 
attribute EventHandler onwritestart 
attribute EventHandler onprogress; 
attribute EventHandler onwrite; 
attribute EventHandler onabort; 
attribute EventHandler onerror; 
attribute EventHandler onwriteend; 


}; 


其 中 ， 


。 abort() 方 法 用 于 终止 当前 文件 操作 ,并 将 readyState 属性 设 为 DONE 状态 ; 

。 属性 error 用 于 返回 在 写 入 数据 时 所 产生 的 DOMError 错误 ; 

。 FileSaver 接口 中 提供 了 INIT、WRITING 和 DONE 三 种 状态 ,其 中 INIT 表示 已 经 
创建 FileSaver 对 象 . 且 未 开始 写 入 数据 的 状态 ,WRITING 表示 正在 写 入 数据 的 状 
态 ,DONE 表示 数据 写 入 完毕 后 的 状态 。 

除 此 之 外 ,FileSaver 接口 拥有 一 套 完整 的 事件 模型 ,用 于 捕获 写 入 数据 时 的 各 种 状态 ， 


具体 见 表 8-2。 


表 8-2 FileSaver 事件 机 制 























可 件 描 述 
onwritestart 数据 写 入 操作 开始 时 触发 
onprogress 数据 写 入 进行 中 
onwrite 数据 写 人 成 功 完 成 时 触发 
onabort 数据 写 人 中 断 时 触发 
onerror 数据 写 人 错误 时 触发 
onwriteend 数据 写 人 完成 时 触发 ,无论 写 和 成功 还 是 失败 都 会 触发 该 事件 


3. FileWriter 接口 


FileWriter 接口 继承 自 FileSaver 接口 ,其 提供 更 丰富 的 文件 操作 ,如 写 入 操作 、 写 人 位 
置 定位 和 文件 截断 等 操作 。FileWriter 接口 的 语法 格式 如 下 。 
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【语法 】 


interface FileWriter:FileSaver{ 
readonly attribute unsigned long long position; 
readonly attribute unsigned long long length; 
void write(Blob data); 
void seek( long long offset); 
void truncate(unsigned long long size); 


}; 


其 中 : 

。 position 属性 (只 读 ) 用 于 返回 下 一 个 即将 写 入 文件 的 字 节 偏 移 量 , 在 创建 文件 时 
position 默认 为 0; 

。 length 属性 (只 读 ) 用 于 返回 文件 的 总 长 度 ; 

write() 方 法 用 于 将 data 数据 写 入 文件 的 position 位 置 ; 

seek() 方 法 用 于 查找 并 设置 文件 的 写 入 位 置 ; 

truncate() 方 法 用 于 设置 文件 的 长 度 设置 , 当 文件 长 度 大 于 指定 长 度 时 将 对 文件 进 

行 截断 处 理 ; 当 文件 长 度 小 于 指定 长 度 时 将 使 用 0 填充 新 增 的 部 分 。 


和 由 于 FileWriter 和 FileSaver 都 是 基于 浏览 器 的 沙 箱 系 统 , 所 以 需要 配合 
> FileSystem API 才能 进行 使 用 。 


8.4 FileSystem API 


当 应 用 程序 中 需要 使 用 大 量 的 二 进 制 数据 或 与 其 他 非 Web 程序 共享 数据 时 ,本 地 数据 
库 并 不 能 满足 用 户 的 需求 ,可 以 使 用 FileSystem API 来 解决 上 述 问 题 ,将 用 户 的 数据 临时 
或 永久 地 存储 到 计算 机 中 。 


8.4.1 申请 磁盘 配额 


当 使 用 FileSystem API 存储 数据 时 ,首先 需要 向 浏览 器 申请 一 定 的 磁盘 配额 ,然后 才 
能 将 数据 进行 存储 。 在 Chrome 浏览 器 中 使 用 window. webkitStorageInfo. requestQuota() 
方法 来 申请 磁盘 配额 ,通过 参数 TEMPORARY 和 PERSISTENT 来 设置 所 申请 空间 的 类 
型 是 临时 的 还 是 永久 的 。requestQuota() 方 法 的 语法 格式 如 下 。 

【语法 】 


window. webkitStorageInfo. requestQuotal( storageType, storageSize, 
successHandler, errorHandler) 


其 中 : 
。 参数 storageType 用 于 指定 申请 磁盘 配额 的 类 型 , 取 值 为 PERSISTENT 和 
TEMPORARY, 当 参数 storageType 为 TEMPORARY 时 ,表示 临时 数据 申请 磁盘 
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配额 , 当 参 数 storageType 为 PERSISTENT 时 表示 永久 数据 申请 磁盘 配额 ,在 永久 
的 磁盘 配额 中 保存 数据 之 后 ,关闭 浏览 器 或 计算 机 时 所 保存 的 数据 不 会 丢失 ; 

。 参数 storageSize 表示 所 申请 的 磁盘 空间 的 大 小 ,参数 类 型 为 整数 ,单位 为 byte; 

。 参数 successHandler 表示 当 申 请 磁盘 配额 成 功 时 所 触发 的 事件 处 理 程序 ; 

。 参数 errorHandler 表示 当 申 请 磁盘 配额 失败 时 所 触发 的 事件 处 理 程序 。 

【示例 】 window. webkitStorageInfo. requestQuota() 方 法 申请 磁盘 配额 


// 申 请 永久 性 磁盘 空间 
window. webkitStorageInfo. requestQuota( PERSISTENT, 1024 * 1024, 
//successHandler 回调 方法 
function(grantedBytes){ 
alert(" 磁 盘 空 间 申 请 成 功 (PersistentStorage)!"); 
}, 
//errorHandler 回调 方法 
function(errorCode){ 
alert(" 磁 盘 空间 申请 失败 "); 
} 
); 
// 申 请 临时 性 磁盘 空间 
window, webkitStorageInfo. requestQuota( TEMPORARY, 1024 * 1024, 
//successHandler 回调 方法 
function(grantedBytes){ 
alert(" 磁 盘 空 间 申 请 成 功 (TemporaryStorage)!"); 
}, 
//errorHandler 回调 方法 
function(errorCode){ 
alert(" 磁 盘 空间 申请 失败 "); 
} 
); 


目前 Chrome 浏览 器 逐步 弃 用 window. webkitStorageInfo 形式 来 申请 磁盘 配额 ,推荐 
使 用 navigator. webkitTemporaryStorage 和 navigator. webkitPersistentStorage 来 申请 临 
时 磁盘 配额 和 永久 磁盘 配额 ,两 者 均 提供 了 requestQuota() 方 法 用 于 申请 磁盘 配额 ,语法 格 
式 如 下 。 

【语法 】 


navigator. webkitPersistentStorage. requestQuotal( storageSize, successHandler, 
errorHandler) 


其 中 : 

。 参数 storageSize 表示 所 申请 的 磁盘 空间 的 大 小 ,该 参数 的 数据 类 型 为 整数 值 ,单位 
为 byte; 

。 参数 successHandler 表示 当 申 请 磁盘 配额 成 功 时 所 触发 的 事件 处 理 程序 ; 

。 参数 errorHandler 表示 当 申 请 磁盘 配额 失败 时 所 触发 的 事件 处 理 程序 。 
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【示例 】 navigator. webkitPersistentStorage. requestQuota() 方 法 申请 磁盘 配额 


navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
//successHandler 回调 方法 
function(grantedBytes){ 
alert(" 磁 盘 空间 申请 成 功 (PersistentStorage)!"); 
}， 
//errorHandler 回调 方法 
function(errorCode){ 
alert(" 磁 盘 空 间 申请 失败 "); 
Bb 
); 


8.4.2 请求 访问 系统 
在 HTML 5 中 ,window 对 象 提供 了 requestFileSystem() 方 法 ,用 于 请 求 浏览 器 沙 箱 中 
的 本 地 文件 系统 ,该 方法 的 语法 格式 如 下 。 
【语法 】 
window. requestFileSystem( storageType, storageSize, successCallback, 
errorCallback) 


其 中 : 

。 参数 storageType 用 来 指定 请 求 访问 的 文件 系统 的 存储 空间 类 型 , 当 参 数 
storageType 为 TEMPORARY 时 表示 请 求 临时 的 存储 空间 , 当 参 数 storageType 
为 PERSISTENT 时 表示 请 求 永 久 的 存储 空间 ; 在 临时 存储 空间 中 存储 的 数据 能 够 
被 浏览 器 进行 清理 ,无 须 通过 应 用 程序 来 实现 ,如 用 户 清 除 浏览 数据 时 ,临时 空间 中 
的 数据 将 被 一 起 删除 ; 而 存储 在 永久 存储 空间 中 的 数据 只 能 通过 用 户 或 应 用 程序 
来 清除 。 

。 参数 storageSize 表示 请 求 文件 系统 的 存储 空间 大 小 ,参数 类 型 为 整数 ,单位 为 
byte。 

。 参数 successCallback 表示 当 请 求 成 功 时 所 触发 的 事件 处 理 程序 。 

。 参数 errorCallback 表示 当 请 求 失败 时 所 触发 的 事件 处 理 程序 ,处 理 方法 中 的 参数 
是 一 个 DOMError 类 型 的 对 象 ,用 于 保存 请 求 失败 时 的 信息 。 

DOMError 对 象 具 有 一 个 name 属性 ,用 于 返回 请 求 失败 时 的 错误 信息 ,name 属性 的 

取 值 范围 是 FileSystem API 预定 义 的 常量 值 ,具体 见 表 8-3。 


表 8-3 DOMError. name 的 取 值 范围 

















属 性 值 描 述 
IndexSizeError 索引 不 在 允许 的 范围 内 
HierarchyRequestError 节点 树 层 次 结构 不 正确 
WrongDocumentError 对 象 在 错误 的 文档 中 
InvalidCharacterError 无 效 字 符 串 
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续 表 

属 性 值 描 述 
NoModificationAllowedError 对 象 不 允许 被 修改 
NotFoundError 对 象 未 找到 
NotSupportedError 不 支持 该 操作 
InvalidStateError 无 效 状 态 
SyntaxError 模式 不 匹配 
InvalidModificationError 无 效 的 修改 方式 
NamespaceError 不 允许 使 用 名 称 空间 
InvalidAccessError 无 效 的 访问 方式 
TypeMismatchError 类 型 不 匹配 
SecurityError 不 安全 的 操作 
NetworkError 网 络 错误 
AbortError 操作 被 中 止 
URLMismatchError URL 匹配 错误 
QuotaExceededError 配额 超标 
TimeoutError 操作 超时 
InvalidNodeTypeError 节点 类 型 无 效 
DataCloneError 数据 无 法 复制 





下 述 代 码 演 示 了 使 用 requestFileSystem() 方 法 来 请 求 访问 本 地 文件 系统 。 
【案例 8-6】 requestFileSystem. html 


< input type = "button" value = "发 出 请 求 " onclick = "createFile()"/><hr/> 
<output id= "result"></output > 
<script> 
window. requestFileSystem = window. requestFileSystem 
| |window. webkitRequestFileSystem; 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ 
console. log( "磁盘 空间 申请 成 功 ,空间 大 小 为 :" + grantedBytes); 
所 
function(errorCode){ 
console. 1og( "磁盘 空间 申请 失败 "); 
} 
); 
function createFile( ){ 
window. requestFileSystem(window. PERSISTENT, 1024 * 1024, 
// successCallback 回调 方法 
function(fileSystem){ 
console. log("fileSystem. name = " + fileSystem. name); 
}, 
// errorCallback 回调 方法 
function(error){ 
console. log(error. name); 
} 
); 
: 


</script> 
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上 述 代码 中 ,通过 navigator. webkitPersistentStorage. requestQuota() 方 法 来 申请 一 个 
PERSISTENT 类 型 的 磁盘 配额 ， 当 单 击 “发 出 请 求 ” 按 钮 时 , 通过 window. 
requestFileSystem() 方 法 向 浏览 器 沙 箱 中 的 本 地 文件 系统 发 出 请 求 ,在 请 求 成 功 时 执行 
successCallback 回调 方法 ,请 求 失 败 时 执行 errorCallback 回调 方法 。 代 码 运行 结果 如 图 8-6 
所 示 。 


Elements Console Sources Network Timeine Profies Application Security 为 


© presenvelog 
磁盘 空间 申请 成 功 ， 空 间 大 小 为 :1648576 
filesystemvnamechttp_127.9.9.1_8828:persistent 
> 





图 8-6 ”window. requestFileSystem() 方 法 


8.4.3 文件 操作 


文件 操作 包括 创建 文件 . 写 和 文件 .追加 文件 . 读 取 文 件 . 删 除 文件 和 复制 文件 等 。 
HTML 5 规范 中 提供 了 FileSystemEntry 接口 ,用 于 对 文件 和 目录 进行 操作 。FileSystemEntry 
接口 中 提供 的 属性 见 表 8-4。 


表 8-4 FileSystemEntry 对 象 的 属性 

















属 性 描 述 
filesystem 当前 对 象 所 对 应 的 FileSystem 对 象 
fullPath 相对 于 根 目 录 的 路 径 
isDirectory 当前 对 象 是 否 是 一 个 目录 
isFile 当前 对 象 是 否 是 一 个 文件 
name 当前 对 象 的 名 称 





FileSystemEntry 接口 中 提供 的 方法 见 表 8-5 。 


表 8-5 ”FileSystemEntry 对 象 的 方法 























方 ”法 描 述 
copyTo() 将 文件 或 目录 复制 到 指定 的 位 置 
getMetadata() 获取 文件 的 元 数据 ,如 文件 的 修改 日 期 和 大 小 等 
getParent() 返回 当前 对 象 的 父 目录 
moveTo() 将 文件 或 目录 移动 到 指定 的 位 置 , 或 者 对 文件 和 目录 重 命名 
remove() 删除 指定 的 文件 或 目录 
toURLO 创建 并 返回 当前 对 象 的 URL 


FileSystemDirectoryEntry 接口 和 FileSystemFileEntry 接口 均 继承 于 FileSystemEntry 接 
口 。 在 FileSystemEntry 接口 中 提供 了 一 个 flesystem 属性 ,用 于 返回 当前 对 象 所 对 应 的 
FileSystem 对 象 ; 在 FileSystem 对 象 中 提供 了 一 个 FileSystemDirectoryEntry 类 型 的 root 属 
性 ,该 属性 是 一 个 只 读 属性 ,用 于 实现 文件 或 目录 的 基本 操作 。 

FileSystemDirectoryEntry 对 象 中 提供 了 许多 操作 文件 和 目录 的 方法 , 见 表 8-6。 
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方 法 


表 8-6 FileSystemDirectoryEntry 对 象 的 方法 
描 述 





createReader() 


创建 一 个 FileSystemDirectoryReader 对 象 ,来 读 取 该 目录 中 的 条 目 





getDirectory() 


返回 一 个 FileSystemDirectoryEntry 对 象 ,用 于 操作 指定 路 径 的 目录 





getFile() 


返回 一 个 FileSystemFileEntry 对 象 , 用 于 操作 指定 路 径 的 文件 








删除 目录 及 其 所 有 内 容 , 包 括 子 目录 的 内 容 , 该 方法 正 被 逐步 废弃 


removeRecursively() 


FileSystemFileEntry 接口 除了 继承 FileSystemEntry 接口 中 的 属性 和 方法 之 外 ,还 提 


供 了 一 个 file() 方 法 ， 


用 于 创建 一 个 读 取 文件 的 新 文件 对 象 。 通 过 FileSystemFileEntry 接 


口 可 以 实现 创建 文件 . 写 入 文件 ,在 文件 中 追加 数据 、 读 取 文 件 以 及 删除 文件 等 操作 。 


1. 创建 文件 





通过 FileSystem. root. getFile() 方 法 来 获得 一 个 用 于 操作 指定 路 径 的 文件 对 象 , 且 该 


文件 对 象 的 父 目录 必须 存在 。getFile() 方 法 的 语法 格式 如 下 。 


【语法 】 


FileSystemDirectoryEntry. getFile([path][ ,options][, successCallback] 
[,errorCallback]); 


其 中 : 
。 参数 path( 可 


选 ) 表 示 请 求 文件 的 路 径 ; 


。 参数 options( 可 选 ), 当 指定 文件 存在 时 将 根据 options 参数 来 决定 是 否 创建 文件 


对 象 ; 


。 参数 successCallback 是 一 个 回调 方法 ,参数 类 型 是 FileSystemFileEntry, 是 当 
getFile() 方 法 成 功 创建 对 象 时 所 调用 的 方法 ; 
。 参数 errorCallback 是 一 个 回调 方法 ,是 当 getFile() 方 法 创建 对 象 失败 时 所 调用 的 


方法 。 


在 getFile() 方 法 中 ,参数 options 由 create 和 exclusive 两 部 分 构成 ,两 者 默认 均 为 
false, 取 值 情 况 见 表 8-7。 


表 8-7 ”options 参数 的 取 值 情况 























options 取 值 情况 

文件 或 目录 条 件 结果 描述 
create exclusive 
false n/a 路 径 存 在 、 类 型 匹配 将 调用 successCallback 回调 方法 
false n/a 路 径 存 在 、 类 型 不 匹配 | 将 调用 errorCallback 回调 方法 

将 删除 现 有 的 文件 或 目录 ,并 创建 一 个 新 的 文件 或 目 

EE falte 路 相 存 在 录 , 然 后 调用 successCallback 回调 方法 
ee ee 路 径 不 存在 ee 目录 ,并 调用 successCallback 回调 
true true 路 径 存 在 将 调用 errorCallback 回调 方法 
pie eh 路 径 不 存在 0 文件 或 目录 ,并 调用 successCallback 回调 
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下 述 代码 演示 了 使 用 getFile() 方 法 来 创建 一 个 文件 。 
【案例 8-7】 createFile. html 


<div> 
文件 名 : < input type = "text" id = "fileName" value = "test.txt"/>< br/> 
文件 大 小 : < input type = "text" id = "fileSize" value= "1024"/>< br/> 
< input type = "button" value = "创建 文件 " onclick = "createFile()"/><hr /> 
<output id= "result"></output > 
</div> 
< Script> 
window. requestFileSystem = window. requestFileSystem 
| |window. webkitRequestFileSystem; 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ 
console. log( "磁盘 空间 申请 成 功 ,空间 大 小 为 :" + grantedBytes); 
}, 
function(errorCode){ 
console. 1og( "磁盘 空间 申请 失败 ") ， 


) 
function createFile(){ 
var fileSize = document. getElementById("fileSize"). value; 
window. requestFileSystem(window. PERSISTENT, fileSize, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var fileName = document. getElementById( "fileName"). value; 
fileSystem. root. getFile(fileName, 
{create: true}, 
function(fileEntry){ 
var text = "完整 路 径 :" + fileEntry. fullPath+ "< br/> 文 件 名 :" 
+ fileEntry. name; 
document. getElementById("result"). innerHTML = text; 
}, 
function(error){ 
console. log(error. name); 
switch(error. name) { 
case "TypeMismatchError": 
console. log(" 类 型 不 匹配 "); 
break; 
case "InvalidModificationError": 
console. log( "无 效 的 修改 方式 "); 
break; 
case "NotFoundError": 
console. log(" 对 象 未 找到 "); 
break; 
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} 
function errorCallback(error){ 

console. log(" 请 求 系统 失败 时 所 执行 的 回调 方法 " + error); 
} 


</script> 


上 述 代码 中 ,使 用 window. requestFileSystem() 方 法 请 求 访问 本 地 文件 系统 , 当 请 求 成 
功 时 回调 successCallback () 方 法 ,并 传人 一 个 fileSystem 对 象 。 使 用 fileSystem. root. 
getFile( ) 方 法 来 创建 一 个 文件 , 当 文件 创建 成 功 时 回调 第 一 个 方法 并 传人 一 个 fileEntry 对 
象 ,通过 fileEntry 对 象 来 获得 所 创建 文件 的 相关 信息 ; 当 文件 创建 失败 时 回调 第 二 个 方法 
并 传人 一 个 error 对 象 ,根据 error 对 象 的 name 属性 来 判断 失败 原因 ,具体 见 表 8-3。 

2. 写 入 文件 

在 HTML 5 规范 中 ,使 用 FileWriter 接口 来 实现 文件 的 写 和 操作。 在 FileSystem API 
中 ,使 用 FileSystem. root. getFile() 方 法 来 获得 指定 路 径 的 文件 ,当成 功 获得 文件 对 象 时 回 
调 successCallback 方法 并 传人 一 个 FileSystemEntry 类 型 的 对 象 fileEntry; 通过 fileEntry 
对 象 的 createWriter() 方 法 获得 一 个 FileWriter 对 象 。 

【示例 】 创建 FileWriter 对 象 


fileSystem. root. getFile(fileNanme, 
{create: true}, 
//successCallback 回调 方法 
function(fileEntry){ 
fileEntry. createWriter(function(fileWriter){ 
//… 文 件 操作 代码 … 
]) 
}, 
// errorCallback 回调 方法 
function(error){ 
console. log(error. name); 
Bs 
); 


下 述 代 码 演示 了 使 用 FileWriter 对 象 向 文件 中 写 入 文本 数据 。 
【案例 8-8】 writeFile. html 


<div> 
文件 名 : < input type = "text" id = "fileName" value = "test. txt"/><br/> 
文件 大 小 : < input type= "text" id= "fileSize" value= "1024"/>< br/> 
写 入 内 容 : < input type = "text" id = "content" value= "你 好 ,欢迎 来 到 直播 间 !"/>< br/> 
< input type = "button" value = "向 文件 写 人 内 容 " onclick = "writeFile()"/><hr/> 
<output id= "result"></output > 
</div> 
<script> 
Var result = document. getElementById("result"); 
Window. requestFileSystem = window. requestFileSystem 
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| |window. webkitRequestFileSystem; 
function writeFile(){ 
var fileSize = document. getElementById( "fileSize").value; 
window. requestFileSystem(window. PERSISTENT, fileSize, 
successCallback, errorCallback); 
| 
function successCallback(fileSystem){ 
Var fileName = document. getElementById( "fileName"). value; 
fileSystem. root. getFile(fileName, 
{create:true}, 
function(fileEntry){ 
fileEntry. createWriter(function(fileWriter){ 
// 文 件 开始 写 人 时 的 回调 方法 
fileWriter. onwritestart = function(event){ 
result. innerHTML += "文件 开始 写 入 < hr/>"; 
] 
fileWriter. onwrite = function(event){ 
result. innerHTML += "文件 writing.. .操作 !"; 
}; 
// 文 件 完成 写 人 时 的 回调 方法 
fileWriter. onwriteend = function(event){ 
result. innerHTML += "< hr/> 文 件 写 人 结束 "; 


}; 
// 文 件 写 人 失败 时 的 回调 方法 
fileWriter. onerror = function(event){ 
result. innerHTML += "< hr/> 文 件 写 操作 失败 !" + event; 
}; 
var content = document. getElementById("content").value; 
var blob = new Blob([content], {type:"text/plain" }); 
fileWriter. write(blob); 
D); 
}, 
function(error){ 
console. log(error. name); 
} 
); 
} 
function errorCallback(error){ 
console. log( "请求 系统 失败 时 所 执行 的 回调 方法 " + error); 
} 


</script> 


上 述 代 码 中 ,使 用 window. requestFileSystem () 方 法 请 求 文件 系统 操作 。 在 
successCallback() 回 调 方 法 中 ,通过 fileSystem. root. getFile() 方 法 来 获得 指定 路 径 的 文 
件 , 当 成 功 获取 到 文件 对 象 时 回调 第 一 个 方法 ,在 回调 方法 中 提供 了 一 个 FileSystemEntry 
类 型 的 文件 对 象 fileEntry; 通过 fileEntry 对 象 来 创建 一 个 FileWriter 对 象 ,用 于 向 文件 中 
写 和 人 数据。 代码 运行 结果 如 图 8-7 所 示 , 当 单 击 “向 文件 写 人 内容 ”按钮 时 ,将 依次 触发 
FileWriter 对 象 的 onwritestart\onwrite 和 onwriteend 事件 处 理 方 法 。 
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文件 开始 写 入 
文件 Writing.. 操 作 ! 
文件 号 结束 
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3. 文件 追加 数据 

向 文件 中 追加 数据 和 写 人 数据 的 操作 非常 相似 ,区 别 在 于 : 在 获取 文件 对 象 之 后 ,需要 
使 用 FileWriter 对 象 的 seek() 方 法 来 定位 文件 的 读 写 位 置 ,将 读 写 位 置 定 位 到 文件 的 末尾 
时 即 可 实现 文件 数据 的 追加 。 

【示例 】 将 读 写 位 置 定 位 到 文件 的 末尾 


fileWriter. seek(fileWriter. length); 


下 述 代码 演示 了 使 用 FileWriter 对 象 向 文件 中 追加 数据 。 
【案例 8-9】 append2File. html 


<div> 
文件 名 : < input type = "text" id = "fileName" value = "test. txt"/>< br/> 
写 入 内 容 : < input type = "text”id = "content" value = "我 是 主播 布谷 鸟 一 "/>< br/> 
< input type = "button" value= "向 文件 追加 内 容 ” onclick = "appendData2File()"/> 
< output id = "result"></output> 
</div> 
< Script> 
var result = document. getElementById("result"); 
window. requestFileSystem = window. requestFileSystem 
|| window. webkitRequestFileSystem; 
function appendData2File(){ 
window. requestFileSystem(window. PERSISTENT, 1024, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var fileName = document. getElementById( "fileName"). value; 
fileSystem. root. getFile(fileName, 
{create:true}, 
function(fileEntry){ 
fileEntry. createWriter(function(fileWriter){ 
// 文 件 开始 写 人 时 的 回调 方法 
fileWriter. onwritestart = function(event){ 


result. innerHTML += "向 文件 中 开始 追加 数据 !< hr/>"; 
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}; 
fileWriter. onwrite = function(event){ 
result. innerHTML += "文件 Appending. . .操作 !"; 
}; 
// 文 件 完成 写 人 时 的 回调 方法 
fileWriter. onwriteend = function(event){ 
result. innerHTML += "< hr/> 追 加 文件 数据 结束 "; 
] 
// 文 件 写 人 失败 时 的 回调 方法 
fileWriter. onerror = function(event){ 
result. innerHTML += "< hr/> 文 件 追 加 操作 失败 !" + event; 
] 
Var content = document. getElementBYyId("content" ) . value; 
var blob = new Blob([content], {type:"text/plain"}); 
fileWriter. seek(fileWriter. length); 
fileWriter. write(blob); 
1); 
本 
function(error){ 
console. log(error. name); 
| 
); 
} 
function errorCallback(error){ 
console. log( "请 求 系 统 失败 时 所 执行 的 回调 方法 " + error); 
} 


</script> 


上 述 代码 中 ,使 用 fileWriter. write() 方 法 向 文件 中 写 入 数据 时 ,默认 在 文件 的 开始 位 
置 开始 写 入 ,如果 文件 中 已 有 数据 将 会 覆盖 原 有 数据 。 当 需要 在 文件 末尾 追加 数据 时 ,使 用 
fileWriter. seek() 方 法 将 文件 的 读 写 位 置 定位 到 文件 的 末尾 处 ,然后 使 用 fileWriter. write( ) 方 
法 将 数据 追加 到 文件 的 末尾 处 。 代 码 运 行 结果 如 图 8-8 所 示 。 
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文件 名 : ltest xt 
写 入 内 容 : 我 是 主 擂 布 从 岛 ~ 


向 文件 追加 内 容 
向 文件 中 开始 追加 数据 ! 
文件 Appending.. 操 作 ! 
追加 文件 数据 结束 














图 8-8 追加 文件 内 容 


4. 读 取 文 件 
在 FileSystem API 中 ,使 用 FileSystem. root. getFile() 方 法 来 获得 指定 路 径 的 文件 , 当 
成 功 获得 文件 对 象 时 将 回调 successCallback 方法 ,并 向 方法 中 传人 FileSystemEntry 类 型 


216 ”HTML 5 高 级 应 用 与 开发 - 微 课 版 


的 参数 fileEntry, 通 过 fileEntry. file() 方 法 来 获得 文件 操作 对 象 , 然 后 使 用 FileReader 对 象 
实现 文件 的 读 取 操作 。 
【示例 】 FileReader 读 取 文 件 


fileSystem. root. getFile(fileName, 
{create:true}, 
function(fileEntry){ 
fileEntry. file(function(file){ 
var fileReader = new FileReader( ); 
//… 文 件 操作 代码 … 
]) 
}, 
function(error){ 
console. log(error. name); 
} 
); 


下 述 代码 演示 了 使 用 FileReader 对 象 从 文件 中 读 取 数据 。 
【案例 8-10】 readFile. html 


<div> 
文件 名 : < input type = "text" id = "fileName" value = "test. txt"/> 
< input type = "button" value = " 读 取 文件 中 的 内 容 " onclick = "readFromFile()"/>< hr/> 
<h3 > 从 文件 中 读 取 的 数据 如 下 : </h3 > 
< output id = "resultDiv"></output > 
</div> 
<script> 
var resultDiv = document. getElementById("resultDiv" ); 
window. requestFileSystem = window. requestFileSystem 
| |window. webkitRequestFileSystenm; 
function readFromFile( ){ 
window. requestFileSystem(window. PERSISTENT, 1024, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var fileName = document. getElementById("fileName"). value; 
fileSystem. root. getFile(fileName, 
{create: true}, 
function(fileEntry){ 
fileEntry. file(function(file){ 
var fileReader = new FileReader( ); 
fileReader. onloadend = function(event){ 
resultDiv. value = this. result; 
}; 
fileReader. readAsText (file); 
D); 
}, 


function(error){ 
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console. log(error. name); 


); 
} 
function errorCallback(error){ 

console. 1og( "请求 系统 失败 时 所 执行 的 回调 方法 " + error); 
上 


</script> 


上 述 代 码 中 ,使 用 window. requestFileSystem ( ) 方法 请 求 文件 系统 操作 。 在 
successCallback() 回 调 方法 中 ,通过 fileSystem. root. getFile() 方 法 来 获得 指定 路 径 的 文 
件 , 当 成 功 获取 到 文件 对 象 时 回调 第 一 个 方法 ,并 向 方法 中 传人 一 个 FileSystemEntry 类 型 
的 文件 对 象 fileEntry, 通 过 fileEntry 对 象 的 file() 方 法 来 实现 文件 的 读 取 操 作 。 

在 writeFile. html 页 面向 test. txt 文件 中 写 和 人 “你 好 ,欢迎 来 到 直播 间 !1” 文 本 数据 ; 接 
下 来 ,在 append2File. html 页 面向 test. txt 文件 中 追加 “我 是 主播 布谷 鸟 一 "文本 数据 ; 最 
后 ,在 readFile. html 页 面 单 击 “ 读 取 文件 中 的 内 容 ” 按 钮 ,将 test. txt 文件 内 容 加 载 到 页 面 
中 ,效果 如 图 8-9 所 示 。 
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文件 各: lest xt 读 取 文件 中 的 内 容 











从 文件 中 读 取 的 数据 如 下 : 
你 好 ， 欢 迎 来 到 直播 间 ! 我 是 主播 布谷 鸟 ~ 


图 8-9 ” 读 取 文件 


5. 删除 文件 

在 FileSystem API 中 ,FileSystemEntry 对 象 中 提供 了 remove() 方 法 ,用 于 删除 指定 的 
文件 。 下 述 代码 演示 了 使 用 FileSystemEntry. remove() 方 法 来 删除 指定 的 文件 。 

【案例 8-11】 deleteFile. html 


<div> 
文件 名 : < input type = "text" id= "fileName" value= "test. txt"/> 
< input type = "button" value = "删除 文件 " onclick = "deleteFile()"/>< hr/> 
<output id= "resultDiv"></output > 
</div> 
<script> 
var resultDiv = document. getElementById("resultDiv"); 
Window. requestFileSystem = window. requestFileSystem 
| |window. webkitRequestFileSystem; 
function deleteFile(){ 
window. requestFileSystem(window. PERSISTENT, 1024, 
successCallback, errorCallback); 
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function successCallback(fileSystem){ 
Var fileName = document. getElementById("fileName"). value; 
fileSystem. root. getFile(fileName, 
{create:true }, 
function(fileEntry){ 
fileEntry. remove(function(){ 
resultDiv. innerHTML = fileEntry. name + "文件 已 被 删除 !" 
DD); 
}, 
function(error){ 
console. log(error. name); 
} 
); 
} 
function errorCallback(error){ 
console. log(" 请 求 系统 失败 时 所 执行 的 回调 方法 " + error); 
} 


</script> 


8.4.4 目录 操作 


在 FileSystem API 中 ,FileSystemDirectoryEntry 接口 继承 了 FileSystemEntry 接口 ， 
具有 该 接口 中 的 所 有 属性 和 方法 , 见 表 8-4 和 表 8-5。 除 此 之 外 ,FileSystemDirectoryEntry 
接口 还 拥有 自己 的 方法 , 见 表 8-6。FileSystemDirectoryEntry 对 象 代表 一 个 目录 ,通过 
FileSystem. root. getDirectory() 方 法 来 获得 一 个 FileSystemDirectoryEntry 类 型 的 目录 对 
象 。8.4.3 节 中 所 介绍 的 FileSystem. root 属性 本 身 也 是 一 个 FileSystemDirectoryEntry 类 
型 的 对 象 。 

常见 的 目录 操作 包括 创建 目录 、 遍 历 目录 、 删 除 目录 、 复 制 目录 、 移 动 目录 和 目录 重 命 
名 等 。 

1. 创建 目录 

通过 FileSystem. root. getDirectory() 方 法 获得 一 个 指定 路 径 的 目录 对 象 ,该 方法 的 语 
法 格式 如 下 。 

【语法 】 

FileSystemDirectoryEntry. getDirectory([path][, options][, successCallback] 

[,errorCallback]); 


其 中 ， 

。 参数 path( 可 选 ) 表 示 所 要 获取 的 目录 路 径 ; 

。 参数 options( 可 选 ) 用 于 设置 当 目 录 不 存在 时 是 否 创建 目录 对 象 , 当 目 录 存 在 时 返 
回 目 录 对 象 还 是 抛 出 一 个 错误 ; 

。 参数 successCallback 是 一 个 回调 方法 ,是 当 getDirectory() 方 法 成 功 获得 一 个 目录 
对 象 时 所 调用 的 方法 ; 

。 参数 errorCallback 是 一 个 回调 方法 ,是 当 getDirectory() 方 法 获得 目录 对 象 失败 时 
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所 调用 的 方法 。 
下 述 代码 演示 了 使 用 getDirectory() 方 法 来 创建 一 个 目录 。 
【案例 8-12】 createDirectory. html 


<div> 
目录 名 : < input type= "text" id = "directoryName" value= "test"/><br/> 
< input type = "button" value= "创建 目录 " onclick = "createDirectory()"/> 
<hr/> 
<output id = "result"></output > 
</div> 
< script> 
window. requestFileSystem = window. requestFileSystem 5 
| | window. webkitRequestFileSystem; 案例 视频 讲解 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ 
console. log( "磁盘 空间 申请 成 功 ,空间 大 小 为 :" + grantedBytes); 





}, 
function(errorCode){ 
console. 1og( "磁盘 空间 申请 失败 ") ， 
) 
function createDirectory(){ 
window, requestFileSystem(window. PERSISTENT, 1024 * 1024, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var directoryName = document. getElementById("directoryName"). value; 
fileSystem. root. getDirectory(directoryName, 
{create:true, exclusive:true}, 
function(directoryEntry){ 
var text = "完整 路 径 :" + directoryEntry. fullPath+ "<br/> 目 录 名 :" 
+ directoryEntry. name; 
document. getElementById("result"). innerHTML = text; 
}, 
function(error){ 
console. log(error. name); 
switch(error. name){ 
case "InvalidModificationError": 
alert(" 目 录 已 存在 "); 
break; 
case "NotFoundError": 
alert(" 父 目录 不 存在 "); 
break; 
default: 
alert(" 其 他 错误 "); 


号 
} 
function errorCallback(error){ 


/ze) 


ef 


220 HTML 5 高 级 应 用 与 开发 - 微 课 版 


console. 1og(" 请 求 系统 失败 时 所 执行 的 回调 方法 " + error); 
} 
</script> 


上 述 代 码 中 ,使 用 FileSystem. root. getDirectory() 方 法 来 创建 一 个 目录 , 当 在 文件 框 中 
输入 workspace 后 , 单 击 “ 创 建 目 录 ” 按 钮 来 创建 一 个 workspace 目录 ,如 图 8-10 所 示 。 由 
于 options 参数 为 “{create: true,exclusive: true}”, 表 示 当 目录 不 存在 时 创建 一 个 目录 ,并 
回调 successCallback 方法 ; 当 目 录 存 在 时 抛 出 InvalidModificationError 错误 ,并 回调 
errorCallback 方法 ; 所 以 当 再 次 单 击 “ 创 建 目 录 ” 按 钮 时 ,将 弹出 “目录 已 存在 ”提示 框 。 


IIE Ea) 


EE 5 
€ 3 CG|O 12700.18020/ 齐 6 洱 女 | WW : 





目录 名 : workspace | 


创建 日 ; 


完整 路 径 : /workspace 
目录 名 : workspace 








8-10 创建 目录 


在 文本 框 中 继续 输入 workspace/liveRoom, 单 击 *“ 创 建 目 录 ” 按 钮 时 ,将 在 workspace 
中 创建 一 个 liveRoom 子 目 录 , 如 图 8-11 所 示 。 如 果 此 时 在 文本 框 中 直接 输入 work/live 来 
创建 work/live 子 目 录 时 ,由 于 work 父 目 录 不 存在 ,将 会 抛 出 NotFoundError 错误 ,并 弹出 
“ 父 目 录 不 存在 ”提示 框 。 
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目录 名 : Iworkspace/liveRoom ] 


创建 目录 


完整 路 径 : /workspace/liveRoom 
目录 名 : liveRoom 








8-11 创建 子 目录 


当 需 要 创建 嵌 套 目录 时 ,可 以 通过 递归 方式 来 实现 。 下 述 代 码 演示 了 使 用 递归 方法 
createDirectory() 来 创建 一 个 嵌 套 目录 。 
【案例 8-13】 createMultLevelDirectory. html 


<div> 
目录 名 : < input type = "text" id = "path" value = "test"/><br/> 
< input type = "button" value = "创建 目录 " onclick = "createMultLevelDirectory()"/> 
<hr/>< output id= "result"></output > 
</div> 
<script> 
Window. requestFileSystem = window. requestFileSystem 
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| |window. webkitRequestFileSystem; 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ 
console. 1og( "磁盘 空间 申请 成 功 ,空间 大 小 为 :" + grantedBytes); 
}, 
function(errorCode){ 
console. 1og( "磁盘 空间 申请 失败 "); 
! 
); 
function createMultLevelDirectory(){ 
window. requestFileSystem(window. PERSISTENT, 1024 * 1024, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var path = document. getElementById("path"). value; 
var folders = path. split("/"); 
createDirectory(fileSystem. root, folders); 


} 
// 递 归 创 建 目录 层次 
function createDirectory(rootDirecotryEntry, folders){ 
// 过 滤 路 径 中 的 . /或 /, 例如 : /test/. /guoqy//img 
if(folders[0] == "."||folders[0] == ""){ 
//slice( ) 用 于 返回 从 第 一 个 参数 到 第 二 个 参数 (默认 是 数组 长 度 ) 之 间 的 数据 
folders = folders. slice(1); 
} 
rootDirecotryEntry. getDirectory(folders[0], 
{create:true}, 
function(directoryEntry){ 
if(folders. length){ 
document. getElementById("result"). innerHTML += "目录 " 
+ directoryEntry. name + "被 创建 <br/>"; 
createDirectory(directoryEntry, folders. slice(1)); 
} 
}, 
function(error){ 
console. log(error. name); 
} 
> 
); 
function errorCallback(error){ 
console. log( "请求 系统 失败 时 所 执行 的 回调 方法 " + error); 
. 


</script> 


上 述 代 码 中 ,从 输入 文本 框 中 获得 所 要 创建 目录 的 字符 串 路 径 , 然 后 使 用 split() 方 法 





将 字符 串 路 径 中 的 目录 分 割 成 数组 。 通 过 createDirectory() 递 归 方 法 来 创建 一 个 退 套 目 
录 。slice() 方 法 用 于 从 数组 中 返回 指定 的 元 素 , 其 中 参数 start 表示 数据 选取 的 开始 位 置 ， 
end 表示 数据 选取 的 结束 位 置 , 当 end 省 略 时 将 返回 从 start 开始 到 数组 末尾 之 间 的 元 素 。 


代码 运行 结果 如 图 8-12 所 示 , 在 文本 框 中 输入 work/space/block/context, 单 击 “ 创 建 
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目录 ”按钮 时 ,将 依次 创建 work、space、block 和 context 四 层 嵌 套 目 录 。 


LaJLEIST 
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目录 名 : lwork/space/block/context | 


创建 目录 


目录 work 被 创建 

目录 space 被 创建 
目录 block 被 创建 
目录 context 被 创建 











图 8-12 创建 谋 套 目录 


2. 读 取 目 录 

使 用 FileSystem API 遍历 目录 时 ,通过 DirectoryEntry 对 象 的 createReader() 方 法 来 
创建 一 个 DirectoryReader 对 象 ,用 于 读 取 指定 目录 下 的 文件 或 子 目 录 。 

【示例 】 创建 一 个 DirectoryReader 对 象 


var directoryReader = fileSystem. root. createReader( ); 
directoryReader,. readEntries( 
// 读 取 目 录 成 功 时 执行 successCallback 回调 方法 
function(results){ … }, 
// 读 取 目 录 失 败 时 执行 errorCallback 回调 方法 
function(error){ … }, 


) 


上 述 代码 中 ,DirectoryEntry 对 象 的 readEntries() 方 法 中 有 两 个 回调 方法 ,分 别 表示 读 
取 目 录 成 功 时 所 执行 的 回调 方法 和 读 取 目录 失败 时 所 执行 的 回调 方法 。 在 成 功 读 取 目 录 时 
向 successCallback 回调 方法 中 传人 一 个 results 对 象 ,用 于 表示 指定 目录 中 的 子 目录 和 文 
件 的 集合 。 

在 异步 FileSystem API 中 不 能 保证 一 次 读 取 目录 中 的 所 有 子 目 录 和 文件 ,但 是 可 以 通 
过 递归 形式 调用 readEntries() 方 法 ,直到 参数 集合 的 长 度 为 0 时 结束 ,从 而 完成 目录 中 的 
子 目 录 和 文件 的 遍历 。 

下 述 代码 演示 了 使 用 DirectoryReader 对 象 来 遍历 一 个 目录 。 

【案例 8-14】 listDirectory. html 


<div> 
目录 名 : < input type = "text" id= "directoryName" /> 
< input type= "button" value= "显示 目录 清单 " onclick = "listDirectory()"/>< hr/> 
<output id= "result"></output > 
</div> 
< Script> 
window. requestFileSystem = window. requestFileSystem 
| |window. webkitRequestFileSystem; 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ }, 
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function(errorCode){ } 
); 
function listDirectory(){ 
document. getElementById("result"). innerHTML = ""; 
window. requestFileSystem(window. PERSISTENT, 1024 * 1024, 
successCallback, errorCallback); 
1 
function successCallback(fileSystem){ 
var directoryReader = fileSystem. root. createReader( ); 
var directoryEntries = []; 
var readEntity = function(){ 
directoryReader. readEntries(function(results){ 
if(!results. length){ 
listResults(directoryEntries. sort()); 
}else{ 
directoryEntries = directoryEntries. concat (results); 
readEntity(); 


}); 
}; 
var directoryName = document, getElementById("directoryName" ). value; 
// 当 文本 框 中 提供 路 径 时 ,将 指定 的 目录 下 的 条 目 遍 历 出 来 
if(directoryName!= ""){ 
fileSystem. root. getDirectory(directoryName, 
{create: false}, 
function(directoryEntry){ 
directoryReader = directoryEntry. createReader( ); 
readEntity(); 
}, 
function(error){ 
console. log(error. name); 


); 

}else{ 
// 如 果 文 本 框 为 空 ( 即 未 指定 路 径 时 ) ,遍历 根 目录 下 的 条 目 
directoryReader = fileSystem. root. createReader(); 


readEntity(); 
} 
} 
function listResults(directoryEntries){ 
Var html; 


directoryEntries. forEach(function(entry){ 

if(entry. isFile){ 

html = "< span >< img src = 'images/file. jpg'>" + entry. name + "</span >"; 
}else{ 

html = "< span >< img src = 'images/folder. jpg'>" + entry. name 

+ "</span>"; 

| 
document. getElementById("result"). innerHTML += html + "< br/>" 


}) 
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function errorCallback(error){ 


console. 1og( "请 求 系统 失败 时 所 执行 的 回调 方法 " + error); 
} 


</script> 


上 述 代 码 运 行 结果 如 图 8-13 所 示 , 当 输入 文本 框 为 空 时 ,将 读 取 文 件 系 统 根 目录 中 的 
所 有 子 目 录 和 文件 ,并 在 页 面 中 显示 出 来 ; 当 文本 框 中 输入 指定 的 目录 (如 workspace) 时 ， 
将 显示 指定 目录 下 的 所 有 子 目 录 和 文件 。 





cc |o 127.0.0.1:8020/ 齐 源码 /chaF 女 | 


目录 名 : [本寺 目录 清单 | 





加 workspace 
届 work 


4 斗 鱼 直 播 计 划 .doc 
了 布谷 乌 直播 计划 .doc 





8-13 目录 清单 


3. 删除 目录 
FileSystem API 中 通过 DirectoryEntry 对 象 的 remove() 方 法 来 删除 指定 的 目录 。 
【示例 】 使 用 directoryEntry. remove() 方 法 来 删除 指定 的 目录 


fileSystem. root. getDirectory(directoryName, 
{create:false}, 
function(directoryEntry){ 
directoryEntry. remove( 
function(){ … }, 
function(){ … } 
); 
}, 
function(error){ … } 


); 


directoryEntry 对 象 表示 一 个 目录 ,通过 directoryEntry. remove() 方 法 来 删除 指定 的 
目录 。remove() 方 法 中 提供 了 两 个 回调 方法 .分别 表示 目录 删除 成 功 时 所 执行 的 回调 方法 
和 目录 删除 失败 时 所 执行 的 回调 方法 。 当 目录 中 含有 子 目录 或 者 文件 时 ,删除 操作 将 失败 ， 
并 抛 出 InvalidModificationError 错误 。 

下 述 代 码 演示 了 使 用 DirectoryEntry 对 象 的 remove() 方 法 来 删除 指定 的 目录 。 

【案例 8-15】 deleteDirectory. html 


<div> 
目录 名 : < input type = "text" id= "directoryName" value = "test"/><br/> 
< input type = "button" value = "删除 目录 " onclick = "deleteDirectory()"/><hr /> 
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<output id= "result"></output > 
</div> 
< script> 
window. requestFileSystem = window. requestFileSystem | | 
Window. webkitRequestFileSystem; 
navigator. webkitPersistentStorage. requestQuota(1024 * 1024, 
function(grantedBytes){ }, 
function(errorCode){ } 
); 
function deleteDirectory(){ 
window. requestFileSystem(window. PERSISTENT, 1024 * 1024, 
successCallback, errorCallback); 
} 
function successCallback(fileSystem){ 
var directoryName = document. getElementById("directoryName"). value; 
fileSystem. root. getDirectory(directoryName, 
{create: false}, 
function(directoryEntry){ 
directoryEntry. remove( function( ){ 
console. log(directoryEntry. name + ", 目录 删除 成 功 !"); 
},function(error){ 
Switch(error.name){ 
case " InvalidModificationError" : 
console. log(error. name 


+ "目录 中 含有 子 目录 或 文件 ,无 法 删除 指定 的 目录 "); 


break; 
default: 
console. log(error. name + ", 其 他 错误 "); 
} 
DD); 
}, 
function(error){ 


Switch(error.name){ 
case "NotFoundError" : 
console. 1og(error.name+ ", 目录 不 存在 "); 


break; 
} 
} 
); 
} 
function errorCallback(error){ } 
</script> 


上 述 代码 中 ,使 用 fileSystem. root. getDirectory() 方 法 返回 一 个 DirectoryEntry 目录 
对 象 ,通过 DirectoryEntry. remove() 方 法 来 删除 指定 的 目录 , 当 目 录 删 除 成 功 时 回调 第 一 
个 方法 , 当 删 除 失败 时 回调 第 二 个 方法 。 

在 文本 框 中 输入 一 个 不 存在 的 目录 时 ,将 抛 出 NotFoundError 错误 ; 在 文件 框 中 输入 
一 个 含有 子 目录 或 文件 的 目录 时 ,将 抛 出 InvalidModificationError 错误 ; 在 文件 框 中 输入 
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一 个 目录 且 目 录 中 不 包含 任何 文件 和 子 目 录 时 : 单 击 * 删 除 目 录 ” 按 钮 将 指定 的 目录 进行 删 
除 操作 ,效果 如 图 8-14 所 示 。 





民间 | Bements Console Sources Network Timeine Profiles Application Security Audits 
OTF v Presevelog 


磁盘 空间 申请 成 功 ， 空 间 大 小 为 :1648576 deleteDirectory.htel? hbt=1495729981236:19 
NotFoundError， 目录 不 存在 geleteDirectory.html? hbt"1495729981236:49 


et 
InvalidModificationError， 目 录 中 含有 子 目 录 或 文件 ， 无 法 出 # 作 指 定 的 目录 。 deleteDirectory.html> hbt=1495729981236:39 
liveRoom, 目 录 鹏 条 成 功 ! geleteDirectory. tnl? hbt=1495720981236:35 
> 


图 8-14 删除 目录 


本 章 总 结 
。 HTML 5 规范 提供 了 File API, 主要 包括 Blob、 File、 FileList、 FileReader 和 
BlobURL 接口 。 


。 HTML 5 规范 新 增 了 Blob 接口 ,用 来 表示 二 进 制 数据 。 

FileReader 接口 用 于 将 磁盘 中 的 文件 读 入 内 存 中 ,允许 使 用 二 进 制 数据 、 文 本 、 

DataURL 和 ArrayBuffer 等 形式 来 读 取 文件 。 

。 URL 接口 用 于 创建 Blob( 或 File) 对 象 的 URL 引用 地 址 。 

。 在 HTML 5 规范 中 ,FileWriter API 不 是 一 个 “独立 ”存在 的 规范 ,需要 依赖 于 File 
API 和 FileSystem API。 

。 FileWriter 接口 继承 于 FileSaver 接口 ,其 提供 更 丰富 的 文件 操作 ,如 写 入 操作 、 写 入 


位 置 定位 和 文件 截断 等 操作 。 
。 在 HTML 5 中 ,window 对 象 提 供 了 requestFileSystem() 方 法 ,用 于 请 求 浏览 器 沙 
箱 中 的 本 地 文件 系统 。 


文件 操作 包括 创建 文件 . 写 人 文件 .追加 文件 . 读 取 文件 .删除 文件 和 复制 文件 等 。 
HTML 5 中 提供 了 FileSystemEntry 接口 ,用 于 对 文件 和 目录 进行 操作 。 
常见 的 目录 操作 包括 创建 目录 、 遍历 目录 、 删 除 目 录 、 复 制 目录 、 移 动 目录 和 目录 重 


命名 等 。 
。 通过 FileSystem. root. getDirectory() 方 法 来 获得 一 个 FileSystemDirectoryEntry 类 
型 的 目录 对 象 。 
本 章 练习 
1. 在 下 列 选 项 中 ,不 属于 File API 接口 的 子 接口 的 是 。 
A. Blob B. FileList C. FileReader D. FileWriter 
2. 下 列 选项 描述 不 正确 的 是 。 


A. Blob 对 象 表示 原始 的 二 进 制 数据 
B. File 对 象 表示 用 户 选择 的 一 个 文件 
C. FileWriter 对 象 用 来 将 文件 读 取 到 内 存 
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D. URL 对 象 为 Blob( 或 File) 二 进 制 数据 提供 一 个 可 访问 的 URL 地 址 


. 在 下 列 选项 中 ,不 属于 FileWriter API 接口 的 子 接口 的 是 
A. Blob B. BlobBuilder C. FileSaver D. FileWriter 
.下列 选 项 中 描述 正确 的 是 


A. 通过 BlobBuilder 接口 来 创建 Blob 二 进 制 对 象 

B. FileSaver 接口 用 于 实现 文件 的 保存 

C.FileWriter 接口 继承 于 FileSaver 接口 ,其 提供 更 丰富 的 文件 操作 ,如 写 人 操作 、 
写 信 位置 定位 文件 截断 等 操作 

D. FileWriter API 不 是 一 个 可 以 “独立 ”存在 的 规范 ,其 依赖 于 File API 和 
FileSystem API 

. 关于 FileSystem API 目录 操作 说 法 错误 的 是 。 

A. 通 过 FileSystem. root. getDirectory() 方 法 可 以 获得 一 个 用 于 操作 指定 路 径 的 目 
录 对 象 

B. 使 用 DirectoryEntry. fileList() 方 法 对 指定 目录 下 的 文件 或 子 目录 进行 遍历 

C. 使 用 DirectoryEntry. remove() 方 法 来 删除 指定 的 目录 

D. 使 用 DirectoryEntry. createReader( ) 方 法 来 创建 一 个 DirectoryReader 对 象 ,用 
于 读 取 指 定 目录 下 的 文件 或 子 目 录 

.关于 FileSystemEntry 对 象 说 法 错误 的 是 

A. isDirectory 属性 用 于 判断 当前 对 象 是 否 是 一 个 文件 

B. copyTo() 方 法 能 够 将 文件 或 目录 复制 到 指定 的 位 置 

C. remove() 方 法 用 于 删除 指定 的 文件 或 目录 

D. toURL() 方 法 为 当前 对 象 创建 一 个 URL 地 址 
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人 SS 本 章 目标 


。 了 解 Server-Sent Events 消息 推送 机 制 。 

。 熟悉 MessageEvent 和 EventSource 接口 。 
。 能 够 通过 服务 端 向 客户 端 推送 消息 。 

。 能 够 在 客户 端 使 用 SSE 技术 接收 数据 。 

。 了 解 jQuery 自 定 义 图 形 插件 技术 。 


9.1 Server-Sent Events 概述 


在 浏览 器 和 服务 端 之 间 , 通 过 请 求 (Request)/ 响 应 (Response) 模 式 实现 数据 的 交互 。 
当 浏 览 器 发 出 请 求 时 ,服务 端 接收 到 客户 端 所 发 送 的 请 求 , 并 对 请 求 数据 进行 处 理 返 回 一 个 
请 求 响应 ,服务 端的 响应 格式 通常 为 HTML XML 或 JSON 等 。 浏 览 器 接收 到 服务 端的 响 
应 后 ,在 页 面 中 将 响应 数据 展现 给 用 户 。 随 着 REST 架构 风格 和 Ajax 的 流行 ,在 客户 端 与 
服务 端 交互 时 更 多 使 用 JSON 格式 作为 数据 交互 的 格式 。 

当 用 户 在 页 面 中 单 击 或 移动 鼠标 时 ,会 触发 相应 的 鼠标 事件 。 在 事件 处 理 方法 中 ,通常 
使 用 Ajax 技术 实现 前 后 端 交 互 ,通过 XMLHttpRequest 对 象 向 服务 端 发 送 请 求 , 由 服务 端 
对 请 求 数据 进行 处 理 和 响应 ,浏览 器 接收 到 服务 端 返回 的 响应 数据 并 在 页 面 中 动态 显示 。 
Ajax 方式 的 不 足 之 处 在 于 : 当 服 务 端的 数据 发 生变 化 时 ,不 能 及 时 地 通知 浏览 器 ,需要 等 
到 浏览 器 下 次 发 送 请 求 时 服务 端 才 能 将 更 新 后 的 数据 发 送 到 浏览 器 。 对 于 某 些 对 数据 实时 
性 要 求 很 高 的 应 用 程序 来 说 ,这 种 延 时 是 不 能 接受 的 。 

为 了 满足 应 用 程序 的 高 实时 性 要 求 ,需要 以 某 种 手段 将 服务 端的 最 新 数据 及 时 推送 到 
浏览 器 客户 端 ,以 保证 当 服 务 端 数据 发 送 变 化 时 在 第 一 时 间 通 知 给 用 户 。 根 据 传 输 协议 ,可 
将 解决 方式 分 为 以 下 两 大 类 : 基于 TCP 协议 的 WebSocket 规范 ; 基于 HTTP 协议 的 简易 
轮 询 .COMET 技术 以 及 服务 器 推送 技术 (Server-Sent Events) 。 

简易 轮 询 是 指 浏览 器 定时 向 服务 端 发 送 请 求 ,来 查询 服务 端 是 否 有 数据 更 新 ,如 图 9-1 
所 示 。 简 易 轮 询 方式 相对 简单 ,在 一 定 程度 上 能 够 解决 上 述 问题 ,但 是 也 存在 一 定 缺 陷 : 当 
轮 询 的 时 间 间 隔 过 长 时 ,会 导致 用 户 不 能 及 时 接收 到 服务 端的 更 新 数据 ; 当 轮 询 的 时 间 间 
隔 过 短 时 ,会 因为 查询 请 求 过 于 频繁 而 影响 服务 端的 性 能 。 

COMET 技术 针对 简易 轮 询 进行 改进 ,采用 的 是 长 轮 询 方式 ; 在 服务 端 每 次 收 到 请 求 


第 9 章 Server-Sent Events 229 
时 ,会 保持 该 连接 在 一 段 时 间 内 处 于 打开 状态 ,而 不 是 在 响应 完成 之 后 就 立即 关闭 。 当 连接 
处 于 打开 状态 的 时 间 内 时 ,服务 端 能 够 将 更 新 数据 及 时 发 送 给 浏览 器 。 当 上 一 个 长 连接 关 
闭 时 ,浏览 器 会 立即 开启 一 个 新 的 长 连接 来 继续 与 服务 端 保持 连接 。 在 使 用 COMET 技术 
时 ,服务 端 和 客户 端 都 需要 第 三 方 库 的 支持 。 











客户 中 服务 端 实际 数据 
URL | 
LEME | 
CSS, 
等 待 用 户 重新 } 
祥 加 载 而 ”和 | 2 
HM OO 
ry 











图 9-1 简易 轮 询 的 时 序 图 


由 于 简易 轮 询 自身 的 缺陷 ,并 不 推荐 使 用 。 而 COMET 技术 并 不 是 HTML 5 规范 中 的 
一 部 分 ,从 兼容 标准 的 角度 出 发 ,也 不 推荐 使 用 。WebSocket 规范 和 Server-Sent Events 推 
送 技术 都 属于 HTML 5 标准 规范 ,目前 主流 浏览 器 都 提供 了 原生 的 支持 ,所 以 推荐 优先 使 
用 WebSocket 和 Server-Sent Events 技术 来 实现 客户 端 与 服务 端的 数据 交互 。WebSocket 
规范 相对 复杂 ,多 用 于 双向 数据 通信 。 对 于 简单 的 服务 器 数据 推送 的 场景 ,使 用 Server- 
Sent Events 技术 即 可 。 

Server-Sent Events 规范 是 HTML 5 规范 的 一 个 重要 组 成 部 分 ,是 一 种 服务 端 与 客户 
端的 单 向 通信 机 制 ,允许 服务 端 将 数据 推送 到 客户 端 ,又 称 单 向 消息 传递 ,如 图 9-2 所 示 。 
客户 端 服务 端 实际 数据 


新 数据 














| 


图 9-2 基于 SSE 消息 推送 的 时 序 图 
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Server-Sent Events 规范 相对 比较 简单 ,主要 由 通信 协议 和 EventSource 接口 两 部 分 组 
成 。 本 章 将 重点 介绍 Server-Sent Events 服务 器 推送 技术 。 


9.1.1 MessageEvent 接口 


在 Server-Sent Events、WebSocket、 跨 文档 消息 传递 ,通道 消息 传递 和 广播 通道 等 技术 
中 ,通常 使 用 MessageEvent 接口 来 实现 消息 的 传递 。MessageEvent 接口 的 语法 格式 如 下 。 
【语法 】 
interface MessageEvent: Event{ 
readonly attribute any data; 
readonly attribute USVString origin; 
readonly attribute DOMString lastEventId; 


readonly attribute MessageEventSource? source; 
readonly attribute FrozenArray < MessagePort > ports; 


void initMessageEvent (DOMString type, optional boolean bubbles, 
optional boolean cancelable , optional any data, optional USVString origin, 
optional DOMString lastEventId, optional MessageEventSource? source, 
optional sequence < MessagePort > ports); 
}; 


其 中 : 

。 属性 data 表示 消息 的 数据 部 分 

。 属性 origin 表示 消息 的 来 源 , 多 用 于 服务 器 推送 技术 和 跨 文档 消息 传递 ; 

。 属性 lastEventId 表示 最 后 一 个 事件 的 ID, 多 用 于 服务 器 推送 技术 ; 

。 属性 source 表示 消息 的 源 窗 口 ,多 用 于 跨 文档 消息 传递 ; 

。 属性 ports 表示 与 消息 一 起 发 送 的 MessagePort 数组 ,用 于 跨 文档 消息 传递 和 通道 
消息 传递 ; 

。 initMessageEvent() 方 法 用 于 对 MessageEvent 事件 进行 初始 化 。 


9.1.2 EventSource 接口 


Server-Sent Events 规范 由 通信 协议 和 EventSource 接口 两 部 分 组 成 。 其 中 ,通信 协议 
是 一 种 基于 纯 文本 的 简单 协议 ,在 服务 端 需要 将 响应 内 容 的 类 型 设 为 text/event-stream 类 
型 。 响 应 文本 的 内 容 可 以 看 作 一 个 事件 流 ,事件 流 由 不 同 的 事件 组 成 ,事件 由 类 型 和 数据 两 
部 分 构成 ,另外 事件 还 有 一 个 可 选 的 标识 符 。 事 件 的 数据 是 由 数据 行 和 换行 符 (\n) 连 接 而 
成 ,一 个 事件 中 可 以 包含 多 个 数据 行 。 不 同事 件 的 内 容 之 间 使 用 由 回 车 符 和 换行 符 组 成 的 
空 行 (\r\n) 进 行 分 隔 。 

在 服务 端的 响应 信息 中 ,每 一 行 都 是 由 类 型 .冒号 (: ) 和 数据 三 部 分 构成 ; 冒号 之 前 表 
示 该 行 的 数据 类 型 ,冒号 之 后 则 是 数据 内 容 。 服 务 端的 响应 信息 中 ,数据 分 为 空白 、data、 
event \id 和 retry 五 种 类 型 ,具体 如 下 所 示 。 

。 当 数 据 类 型 为 空白 时 ,表示 该 行 是 注释 ,在 处 理 时 将 被 忽略 ; 

。 当 数 据 类 型 为 data 时 ,表示 该 行 包 含 的 是 数据 信息 ; 
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。 当 数 据 类 型 为 event 时 ,表示 该 行 用 于 声明 事件 的 类 型 ; 

。 当 数 据 类 型 为 id 时 ,表示 该 行 用 来 声明 事件 的 标识 符 ; 

。 当 数 据 类 型 为 retry 时 ,表示 该 行 用 于 指定 浏览 器 在 连接 断 开 之 后 再 次 连接 之 前 的 
等 待 时 间 。 

下 述 代码 演示 了 服务 端的 响应 信息 的 组 成 部 分 。 

【示例 】 服务 端的 响应 信息 


data: first event 


data: second event 
id: 101 


event: myEvent 
data: third event 
id: 102 


: this is a comment 
data: fourth event 
data: fourth event continue 


在 服务 端的 响应 信息 中 ,事件 之 间 通 过 空 行 进行 分 隔 。 第 一 个 事件 是 一 个 默认 的 事件 
类 型 ,事件 中 仅 包含 数据 部 分 (first event); 在 第 二 个 事件 中 ,id 表示 事件 的 标识 符 (101)， 
data 表示 数据 部 分 (second event); 第 三 个 事件 是 一 个 myEvent 类 型 的 事件 ,id 表示 事件 
的 标识 符 (102) ,数据 部 分 为 third event; 在 第 四 个 事件 中 ,第 一 行为 注释 内 容 , 后 两 行为 数 
据 部 分 ,数据 内 容 为 fourth event \n fourth event continue。 

当 浏 览 器 接收 服务 端的 响应 数据 时 ,需要 借助 JavaScript 中 的 EventSource 接口 来 处 
理 响应 数据 。EventSource 采用 了 标准 的 事件 监听 方式 ,只 需要 在 对 象 上 添加 对 应 的 事件 
处 理 方法 即 可 。EventSource 接口 的 语法 格式 如 下 。 

【语法 】 

interface EventSource: EventTarget{ 


readonly attribute USVString url; 
readonly attribute boolean withCredentials; 


// ready state 

const unsigned short CONNECTING = 0; 

const unsigned short OPEN = 1; 

const unsigned short CLOSED = 2; 

readonly attribute unsigned short readyState; 


// networking 

attribute EventHandler onopen; 
attribute EventHandler onmessage; 
attribute EventHandler onerror; 
void close(); 
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其 中 : 
。 属性 url 是 一 个 只 读 属 性 ,表示 EventSource 对 象 所 对 应 的 URL; 
。 属性 withCredentials 是 一 个 只 读 属 性 ,表示 EventSource 对 象 的 最 终 初始 状态 ; 
。 属性 readyState 表示 连接 的 状态 , 取 值 为 CONNECTING、OPEN 和 CLOSED 三 种 
状态 ; 
。 close() 方 法 用 于 关闭 连接 ,并 将 readyState 属性 设置 为 CLOSED 状态 。 


除 此 之 外 ,EventSource 接口 拥有 一 套 完整 的 事件 模型 ,用 于 捕获 浏览 器 与 服务 器 交互 
过 程 的 各 种 状态 ,具体 如 表 9-1 所 示 。 





表 9-1 EventSource 事件 机 制 











事 件 描 述 
onopen 当成 功 与 服务 器 建立 连接 时 触发 该 事件 
onmessage 当 从 服务 器 接收 到 数据 时 触发 该 事件 
onerror 当 出 现 错误 时 触发 该 事件 





下 述 代码 演示 了 使 用 EventSource 接口 来 创建 事件 监听 对 象 。 
【示例 】 EventSource 对 象 的 创建 和 使 用 


var eventSource = new EventSource( '/services/events/'); 
eventSource. onmessage = function(event){ 
console. log(event. data); 
}; 
eventSource. addEventListener( 'myEvent', function(event){ 
console. log(event. data); 


D); 

上 述 代 码 中 ,使 用 EventSource() 构 造 方法 来 创建 一 个 EventSource 对 象 ,其 中 参数 URL 
表示 Server-Sent Events 服务 端的 访问 地 址 。 通 过 onmessage 属性 和 addEventListener() 方 法 
可 以 来 绑 定 对 应 的 事件 处 理 方法 。 


9.2 基于 Servlet 的 动态 图 形 报表 





对 于 通信 协议 来 说 ,服务 器 推送 技术 是 一 个 比较 简单 的 协议 。 服 务 端 只 需要 按照 协议 
所 规定 的 格式 ,向 客户 端 发 送 响应 数据 即 可 。 本 节 使 用 Servlet 作为 服务 端 技术 ,实现 服务 
端的 数据 推送 ,客户 端 接收 到 服务 端 数据 后 ,实时 更 新 页 面 中 的 数据 报表 。 


9.2.1 服务 端的 实现 


由 于 Servlet 是 一 种 基于 Java 语言 的 服务 端 技 术 , 所 以 事先 需要 安装 并 配置 好 Java 环 
境 , 读 者 可 自行 查询 相关 文档 。 此 处 使 用 JDK 8 十 Tomcat 8 作为 开发 环境 ,使 用 Eclipse 开 
发 工具 来 实现 编码 。 


首先 编写 DataCreator 类 ,用 于 随机 生成 一 组 数据 ,代码 如 下 所 示 。 
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【案例 9-1】 DataCreator. java 


import net. sf. json. JSONArray; 
import net. sf. json. JSONObject; 
public class DataCreator{ 
// 随 机 生成 销售 数据 
public static String createRandomData( ){ 
JSONArray jsonArray = new JSONArray(); 
String []items = new String[ ]{" 女 装 ", "男装 ", "童装 ", "运动 ", "内 衣 "}; 
for(int i=0;i<5;it++){ 
int random = (int)Math. round(Math. random( ) * 100); 
JSONObject item = new JSONObject(); 
item. put ("name", items[i]); 
item. put ("amount", random); 
jsonArray. add( item); 
' 
JSONObject data = new JSONObject( ); 
data. put ("drawData", jsonArray); 
return data. toSstring( ); 


当 用 户 与 服务 端 建立 连接 时 需要 将 用 户 会 话 Session 保存 到 会 话 集 合 中 ,以 便服 务 端 
逐一 推送 数据 。 在 服务 端 推送 数据 时 ,向 所 有 与 服务 端 建立 的 请 求 连接 推送 相同 的 数据 。 

接 下 来 创建 SessionOnLine 类 ,用 于 封装 用 户 的 HttpSession 会 话 和 PrintWriter 输出 
对 象 ,代码 如 下 所 示 。 

【案例 9-2】 SessionOnLine. java 





import java. io. PrintWriter; 
import javax. servlet. http. HttpSession; 
// 用 于 封装 用 户 的 session 会 话 和 out 输出 流 
public class SessionOnLine{ 
private HttpSession session; 
private PrintWriter out; 
public SessionOnLine(){ 


super(); 

} 

public SessionOnLine(HttpSession session){ 
super(); 
this. session = session; 

} 


public HttpSession getSession(){ 
return session; 

} 

public void setSession(HttpSession session){ 
this. session = session; 


} 
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public PrintWriter getOut(){ 
return out; 


; 

public void setOut(PrintWriter out){ 
this. out = out; 

由 


在 SessionCollection 类 中 封装 了 一 个 < String,SessionOnLine > 类 型 的 Map 集合 ,用 于 
保存 所 有 的 在 线 用 户 的 会 话 信 息 ; 在 集合 中 使 用 SessionID 作为 Map 集合 的 键 ， 
SessionOnLine 对 象 作为 Map 集合 的 值 , 代 码 如 下 所 示 。 

【案例 9-3】 SessionCollection. java 


import java. util. *; 
public class SessionCollection{ 
// 在 线 用 户 的 会 话 集 合 
public static Map < String, SessionOnLine > sessionMap 
= new HashMap < String, SessionOnLine >(); 


SessionOnLineListener 类 实现 了 HttpSessionListener 接口 ,用 于 监听 用 户 的 上 线 和 离 
线 操作 。 当 用 户 上 线 时 ,在 sessionCreated() 方 法 中 将 用 户 会 话 保 存 到 SessionCollection 集 
合 中 ; 当 用 户 离线 时 ,在 sessionDestroyed() 方 法 中 将 用 户 会 话 从 SessionCollection 集合 中 
移 除 。 

【案例 9-4】 SessionCollection. java 


import javax. servlet. http. HttpSession; 
import javax. servlet. http. HttpSessionEvent; 
import javax. servlet. http. HttpSessionListener; 
// 用 于 监听 用 户 连接 和 离线 
public class SessionOnLineListener implements HttpSessionListener{ 
@Override 
public void sessionCreated(HttpSessionEvent sessionEvent){ 
HttpSession session = sessionEvent. getSession( ); 
SessionOnLine sessionOnLine = new SessionOnLine( session); 
// 当 用 户 上 线 时 ,将 用 户 的 session 添加 到 会 话 集合 中 
SessionCollection. sessionMap. put( session. getId( ), sessionOnLine); 
} 
@Override 
public void sessionDestroyed(HttpSessionEvent sessionEvent){ 
HttpSession session = sessionEvent. getSession(); 
// 当 用 户 离线 时 ,将 用 户 的 session 从 会 话 集合 中 移 除 


SessionCollection. sessionMap. removel( session. getId()); 


创建 一 个 ChartPushServlet 类 ,用 于 响应 用 户 的 请 求 ,将 用 户 的 out 输出 对 象 保存 到 
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sessionOnLine 对 象 中 ,然后 定时 向 所 有 在 线 用 户 推 送 随机 生成 的 销售 数据 ,代码 如 下 
所 示 。 
【案例 9-5】 SessionCollection. java 


import java. io. *; 
import java. util. Map; 
import javax. servlet. http. * ; 
import javax. servlet. ServletException; 
public class ChartPushServlet extends HttpServlet{ 
private static final long serialVersionUID= 1L; 
public ChartPushServlet() { 
super(); 
} 
protected void doGet (HttpServletRequest request, 
HttpServletResponse response)throws ServletException, IOException{ 
response. setContentType(" text/event — stream" ); 
response. setCharacterEncoding("UTF — 8"); 
PrintWriter out = response. getWriter( ); 
// 用 户 上 线 时 ,将 out 保存 到 会 话 集合 中 
Map < String, SessionOnLine > sessionMap = SessionCollection. sessionMap; 
SessionOnLine sessionOnLine 
= sessionMap. get(request. getSession().getId()); 
sessionOnLine. setOut(out); 
// 循 环 向 客户 端 发 送 数据 
while(true){ 
String data = DataCreator. createRandomData( ); 
// 对 所 有 在 线 用 户 发 送 数据 更 新 
for(String key:sessionMap. keySet()){ 
SessionOnLine session = sessionMap. get (key); 
PrintWriter outFromSession = session. getOut(); 
outFromSession. println("data:" + data+ "\r\n"); 
outFromSession. flush( ); 
1 
try{ 
// 间 隔 2s 
Thread. sleep(2000); 
} catch( InterruptedException e){ 
e. printStackTrace( ); 


} 

protected void doPost(HttpServletRequest request, 
HttpServletResponse response)throws ServletException, IOException{ 
doGet (request, response); 


最 后 ,修改 web. xml 配置 文件 ,将 ChartPushServlet 和 SessionOnLineListener 在 
web. xml 中 进行 配置 ,代码 如 下 所 示 。 
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【案例 9-6】 web. xml 


<?xml version= "1.0" encoding = "UTF - 8"?> 
<web— app xmlns = "http://xmlns. jcp. org/xml/ns/javaee" 
xmlns:xsi= "http://www. w3. org/2001/XMLSchema — instance" 
version= "3.1"> 
<listener> 
< listener - class > com. jCuckoo. SessionOnLineListener </listener - class> 
</listener > 
<servlet> 
< servlet - name > ChartPushServlet </servlet - name> 
< servlet - class > com. jCuckoo. ChartPushServlet </servlet - class> 
< async - supported > true </async - supported> 
</servlet> 
< servlet ~- mapping> 
< servlet - name > ChartPushServlet </servlet - name> 
< url - pattern>/ChartPushServlet </url - pattern> 
</servlet - mapping> 
< Welcome 一 file- list> 
< welcome - file> chartReport. jsp </welcome - file> 
</welcome - file- list> 
</web— app> 


9.2.2 客户 端的 实现 


当 浏 览 器 向 服务 器 发 出 请 求 时 ,在 浏览 器 和 服务 器 之 间 将 创建 一 个 基于 HTTP 的 连 
接 ; 在 服务 器 推送 数据 时 ,浏览 器 通过 Server-Sent Events 技术 来 接收 服务 端的 推送 数据 ， 
通过 图 形 报表 的 形式 将 数据 动态 渲染 出 来 。 此 处 借助 jQuery 和 HTML 5 Canvas 技术 , 自 
定义 了 一 个 图 形 报表 插件 jquery. chart. js, 将 数据 以 圆 饼 图 .柱状 图 和 折线 图 的 形式 显示 出 
来 ,代码 如 下 所 示 。 

【案例 9-7】 jquery. chart. js 


// 自 定义 表格 插件 
// @author jCuckoo 
;(function( $ ,window, document, undef ined){ 
var defaults = {bgColor:[ {drawColor:"red"}, 
{drawColor:"green"}, 
{drawColor:"yellow"}, 
{drawColor: "blue"}, 
{drawColor: "gray"}], 
frontColor:{ 
font:"12px 宋体 "， 
color:"black" 
}; 
// 构 造 方法 
function DataDrawer (element, data, options){ 
this. $ element = element; 
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this. drawType = data. drawType; // 绘 制 类 型 
this. drawData = data. drawData; // 绘 制 数据 
this. setting = $ .extend({},defaults, options); 
}; 
// 添 加 属性 或 方法 
DataDrawer. prototype = { 
// 绘 制 圆 饼 
drawPieChart:function(){ 
var startPoint = 1.5 * Math. PI; // 开 始 位 置 
Var endPoint = 0; 
Var context = this. $ element. get(0).getContext("2d"); 
this. clearCanvas(context); 
for(var i=0;i<this.drawData. length; i++){ 
context. fillStyle = this. setting.bgColor[i].drawColor; 
context. strokeStyle = this. setting.bgColor[i]. drawColor; 
// 开 始 创建 路 径 
context. beginPath( ); 
// 开 始 创建 路 径 (圆心 ) 
context. moveTo(150, 150); 
// 计 算 弧 形 结束 位 置 的 角度 
endPoint = startPoint ~ Math. PI*2*x( 
this. drawData[ i]. amount/this.allData); 
// 开 始 创建 路 径 ( 弧 形 圆 心 ) 
context. arc(150,150, 90, startPoint, endPoint, true); 
context. fil1(); 
context. stroke( ); 
// 保 存 状态 
context. save( ); 
// 计 算 文本 角度 
var textAngle = (startPoint + endPoint)/2; 
// 每 部 分 所 占 比 重 
var textScale = this. drawData[ i]. amount/this. allData; 
// 将 坐标 原点 移动 到 绘制 文本 处 (根据 圆心 进行 计算 ) 
context. translate(150 + 110 * Math. cos(textAngle), 
150 + 110 * Math. sin(textAngle)); 
// 旋 转 文 本 
context. rotate( textAngle + Math. PI * 1/2); 
context. fillStyle = this. setting. frontColor. color; 
context. font = this. setting. frontColor. font; 
context. fillText (this. drawData[ i]. name, — 20,0); 
// 恢 复 到 保存 点 
context. restore(); 
startPoint -= Math. PI x 2* (this. drawData[ i]. amount/this.allData); 
} 
} 
,drawColumnar: function( ){ // 绘 制 柱状 图 标 
Var context = this. $ element. get(0).getContext("2d"); 
this. clearCanvas(context); 
// 绘 制 坐标 系 
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this. drawCoordinateSystem(context); 

Var width = 20; 

Var margin = 20; 

for(var i= 0;i<this. drawData. length; i++){ 
context. fillStyle = this. setting. bgColor[ i]. drawColor; 
context. strokeStyle = this. setting. bgColor[ i]. drawColor; 
// 计 算 绘制 的 矩形 的 左上 角 的 x,y 坐标 (以 绘制 的 x 坐标 轴 为 参考 基准 ) 
Var x= 40+ (width+ margin) * i; 
var y= 260 — 260 * (this. drawData[ i].amount/this. allData); 
// 绘 制 圆柱 
context. fillRect(x,y,width, 260* ( 

this. drawData[ i]. amount/this.allData)); 

// 绘 制 文本 内 容 
context. fillStyle = this. setting. frontColor. color; 
context. font = this. setting. frontColor. font; 
context. fillText (this. drawData[ i]. name, x, 280); 


,drawFoldLine:function(){ // 绘 制 折线 


Var padding = 50; 
Var context = this. $ element. get(0).getContext("2d"); 
this. clearCanvas(context); 
// 绘 制 坐标 系 
this. drawCoordinateSystem(context); 
context. beginPath( ) ; 
context. moveTo( 20, 260); 
for(var i=0;i<this. drawData. length; i++){ 
// 计 算 折线 点 的 坐标 
var x= 40 + padding * i; 
var y= 260 - 260 * (this. drawData[ i].amount/this.allData); 
context. setLineDash([5, 5]); // 设 置 绘制 线段 的 样式 为 虚线 
context. lineTo(x, y); 
context. stroke( ); 
context. fillStyle = "gray"; 
context. fillRect(x,y,1,260*( 
this. drawData[ i]. amount/this.allData) ); 
context. fillStyle= this. setting. frontColor. color; 
context. font = this. setting. frontColor. font; 
context. fillText(this. drawData[ i]. name, x — 10,280); 


,drawCoordinateSystem:function(context){ // 绘 制 坐标 系 


context. setLineDash([0, 0]); 
context. beginPath( ); 

context. moveTo( 20, 20); 
context. lineTo( 20, 260); 
context. lineTo( 260, 260); 
context. strokeStyle = "black"; 
context. lineWidth = 2; 
context. stroke( ); 


(288) 
本 | 
第 9 章 ”Server-Sent Events 3 
} 
,countData: function( ){ // 统 计数 据 的 总 量 
var allData = 0; 
for(var i=0;i<this. drawData. length; i++){ 
allData += this. drawData[ i]. amount; 
} 
this.allData = allData; 
},clearCanvas:function(context){ 
Var canvas = context. canvas; 
context. fillStyle = "white"; 
context. fillRect(0,0,canvas. width, canvas. height); 
| 
}; 
// 在 插件 中 使 用 DataList 对 象 
$ .fn. drawChart = function(data, options, drawType) { 
// 创 建 DataList 的 实体 
var dataDrawer = new DataDrawer(this, data, options); 
console. log(dataDrawer. drawData) ; 
// 调 用 其 方法 
dataDrawer. countData( ); 
if("PieChart" == drawType){ 
return dataDrawer. drawPieChart( ); 
}else if("Columnar" == drawType){ 
return dataDrawer. drawColumnar( ); 
}else if("FoldLine" == drawType){ 
return dataDrawer. drawFoldLine( ); 


} 


}) (jQuery, window, document) ; 


在 chartReport. jsp 页 面 中 ,创建 一 个 EventSource 对 象 ,设置 EventSource 对 象 的 
onmessage 事件 处 理 方法 ; 当 客 户 端 接收 服务 端 所 推送 的 数据 时 ,调用 updateChart(data) 
方法 来 更 新 页 面 中 的 图 形 报 表 , 代 码 如 下 所 示 。 

【案例 9-8】 chartReport. jsp 


<% @ page language = "java" contentType = "text/html; charset = utf — 8" %> 
<!doctype html > 
<html> 
<head> 
<meta charset = "utf ~ 8"> > 
< title> 销 售 数据 的 图 形 报表 统计 </title> ds 
< script type = "text/javascript" src="js/jquery— 1.x. js"></script> 
< script type = "text/javascript" src= "js/jquery. chart. js"></script> 
< link href = "css/layout.css" rel = "stylesheet" type = "text/css"/> 
</head> 
<body> 
<div class = "place">< span > 位置 : </span> 
<ul class = "placeul"> 
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<1i><ahref=" 井 "> 首页 </a></1i> 
<1i><a href =" 井 "> 统计 报表 </a></1i> 
</ul> 
</div> 
<div class = "canvasbody"> 
<div class = "usual"> 
< canvas id= "myCanvasl" width = "300" height = "300" 
style = "border:1px solid #ccc;margin— right:10px;"></canvas> 
<canvas id= "myCanvas2" width= "300" height = "300" 
style = "border:1px solid #ccc;margin— right:10px;"></canvas> 
<canvas id= "myCanvas3" width = "300" height = "300" 
style= "border:1px solid #ccc"></canvas> 
</div> 
</div> 
< script type = "text/javascript"> 
// 创 建 EventSource 对 象 
var dataEventSource = new EventSource(". /ChartPushServlet"); 
// 设 置 onmessage 事件 处 理 方法 , 当 接收 到 服务 器 发 送 的 数据 时 调用 该 事件 
dataEventSource. onmessage = function(event){ 
// 获 得 服务 端 返回 的 销售 数据 
var data = JSON. parse(event. data); 
// 更 新 图 形 报 表 
updateChart (data); 
}; 
// 设 置 onerror 事件 处 理 方法 , 当 发 生 错误 时 调用 该 事件 
dataEventSource. onerror = function(event){ 
dataEventSource. close( ); 
console. log(event); 
’ 
// 使 用 指定 的 数据 更 新 图 形 报表 
function updateChart(data){ 
// 预 设 图 形 报表 中 各 部 分 的 颜色 
var options = {bgColor:[ 
{drawColor:" #9cc507"}, 
{drawColor:" #8b86ca"}, 
{drawColor:"#ff4400"}, 
{drawColor:"#ffb81d"}, 
{drawColor:" #00b3e3"}] 
,frontColor:{ 
font:" 16px microsoft", 
color:"black" 
} 
}; 
// 绘 制 圆 饼 
$ ("#myCanvas1").drawChart(data, options, "PieChart" ); 
// 绘 制 柱状 
$ ("#myCanvas2"). drawChart(data, options, "Columnar"); 
// 绘 制 折线 
$ ("#myCanvas3").drawChart(data, options, "FoldLine"); 
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} 

</script > 
</body> 
</html> 


运行 Tomcat 服务 器 ,同时 在 多 个 浏览 器 中 打开 http://localhost:8080/ChartReprot_ 
SSE/ 网 址 进行 测试 ,各 浏览 器 同步 接收 服务 端 推 送 的 数据 ,并 以 图 形 报 表 形 式 动 态 进 行 刷 
新 ,效果 如 图 9-3 所 示 。 


中 钢 和 数据 的 图 形 按 表 统计 x > 
€>0C [ol localhost:8080/ChartReprot_SSE/ 





位 置 : 黄页 、 统 计 报 表 


bg 人 
区 要 


女装 男装 童装 运动 内 衣 女装 男装 童装 运动 内 衣 
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9.3 基于 Node.js 的 动态 图 形 报表 


Node. js 是 一 个 基于 Chrome V8 引擎 的 JavaScript 运行 环境 。 由 于 Node. js 是 一 种 基 
于 事件 驱动 . 非 阻 塞 式 1/O 的 模型 ,具有 轻 量 .高效 等 特点 , 故 其 目前 广泛 得 到 Web 前 端 开 
发 者 的 青睐 。 在 使 用 Node. js 之 前 ,需要 去 其 官网 https://nodejs. org/en/ 下 载 安装 包 , 安 
装 过 程 比较 简单 ,此 处 不 再 袭 述 。 


9.3.1 服务 端的 实现 


在 Node. js 环境 中 ,使 用 npm 命令 来 实现 项 目的 初始 化 .资源 包 的 安装 等 操作 。 新 建 
一 个 项 目 一 一 动态 图 像 报表 (SSE) ,在 控制 台中 使 用 npm init 命令 对 项 目 进行 初始 化 ,此 时 
生成 一 个 名 为 package. json 的 配置 文件 ,该 文件 位 于 项 目的 根 目录 ; 在 package. json 文件 
中 定义 当前 项 目 中 所 需要 的 各 种 模块 以 及 项 目的 配置 信息 (如 名 称 、 版 本 、 许 可 证 等 数据 )。 
有 关 npm 工具 读者 可 查阅 本 书 的 附录 B。 

【案例 9-9】 package. json 


"name" : "datachart"， 
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"version":"1.0.0", 
"description":"", 
"main" :"index. js", 
vacripts":{ 
"test":"echo\"Error:no test specified\"g&exit 1" 
}, 
"author" :"jCuckoo", 
"license" :"ISC" 


接 下 来 ,在 控制 台中 使 用 npm install express 一 save-dev 命令 来 安装 Express 框架 ,其 
中 一 save-dev 参数 表示 在 安装 Express 框架 时 ,将 Express 信息 配置 到 package. json 文件 的 
devDependencies 选项 中 ; 在 项 目 迁 移 时 忽略 node_modules 目录 ,在 目标 服务 器 通过 ,npm 
install 命令 并 根据 package. json 配置 文件 来 安装 项 目 所 依赖 的 资源 包 。 

Express 框架 安装 完成 后 ,package. json 配置 文件 的 内 容 如 下 所 示 。 

【案例 9-10】 package. json 


d 
"name" : "datachart"， 
"version":"1.0.0", 


"description":"", 


"main":"index. js", 
"scripts":{ 
"test":"echo\"Error: no test specified\"&&exit 1" 
}, 
"author" :"jCuckoo", 
"license" :"ISC", 
"devDependencies":{ 
"express" :"“4.15.3" 
} 


全 ; 此 处 重点 讲解 在 HTML 5 页 面 中 ,使 用 Server-Sent Events 技术 实现 与 服务 器 的 交 
有 互 ; 有 关 下 xpress 框架 技术 ,读者 可 请 参见 http://www. expressjs. com. cn。 


在 项 目的 根 目 录 中 ,创建 一 个 app. js 文件 作为 服务 端的 路 由 文件 ,在 该 文件 中 完成 服 
务 端的 路 由 功能 ,代码 如 下 所 示 。 
【案例 9-11】 app.js 


var express = require( 'express'); 

var app = express(); 

// 配 置 静态 资源 的 访问 方式 

app. use( express. static( ‘public')); 

app. get( '/', function(req, res){ 
res. type( 'text/html'); 
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//res. sendfile( '. /public/chartReport. html1'); 

// 推 荐 使 用 sendFile(), 该 方法 需要 使 用 文件 的 绝对 路 径 

res. sendFile(__ dirname + '/public/chartReport. htm]l'); 

//res. sendFile( '/public/chartReport. html', {'root': dirname}); 
1); 


var clientId= 0; 
var clients= {}; 
// 记 录用 户 连 接 请 求 
app. get( '/events/', function(req, res){ 
req. socket. setTimeout (Number. MAX_VALUE); 
res. writeHead(200,{ 
'Content - Type': 'text/event - stream'， 
'Cache - Control': 'no ~ cache', 
'Connection': 'keep ~ alive’ 
1D); 
res. write( \n'); 
(function(clientId){ 
// 将 连接 保存 到 集合 中 
clients[clientId] = res; 
// 当 连接 关闭 后 , 从 连接 集合 中 移 除 
req. on("close", function(){delete clients[clientId]}); 
})(++clientId); 
1); 
// 对 所 有 客户 端 发 生 数据 
setInterval(function( ){ 
for (clientId in clients){ 
clients[clientId]. writel( 'data: '+ createRandomData() + '\n\n'); 
}; 
}, 500); 


// 生 成 随机 数据 ,并 以 JSON 字符 串 形式 返回 
function createRandomData( ){ 
let drawData= [ ]; 
let items=[' 女 装 ', ' 男 装 ',' 童 装 ', ' 运 动 ', ' 内 衣 ']; 
for(let i=0;i<5;i++){ 
let random = parseInt (Math. random( ) * 100); 
let ;item = {'name': items[i], 'amount':random}; 
drawData. push( item); 
} 
return JSON. stringify({ 'drawData': drawData} ); 
} 
app. listen(process. env. PORT| | 3000); 


上 述 代码 中 ，_dirname 是 node. js 中 的 一 个 全 局 变量 ,用 于 返回 当前 文件 所 在 目录 的 
完整 路 径 。 使 用 require() 方 法 来 加 载 Express 框架 ,app. use(express. static( 'public')) 方 
法 来 设置 静态 资源 的 访问 路 径 。 

通过 app. get() 方 法 来 定义 服务 端的 路 由 , 当 访 问 项 目的 根 路 径 “/ ”路 径 时 将 自动 跳 转 
到 /public/chartReport. html 页 面 , 当 访 问 “/events/” 路 径 请 求 时 ,将 建立 用 户 与 服务 端的 
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请 求 连接 并 保存 到 clients 集合 中 。createRandomData() 方 法 用 于 随机 产生 一 组 数据 ,通过 


setInterval() 方 法 定时 向 客户 端 推送 最 新 数据 。 SE) | 
pr 
9.3.2 客户 端的 实现 人 
在 项 目的 根 目录 下 ,创建 一 个 public 目录 ,专门 用 于 存放 静态 次 ee 
源 文件 ,项 目的 目录 结构 如 图 9-4 所 示 , 其 中 jquery. chart. js 插件 参 i 
照 案例 9-7。 rs 
在 chartReport. html 页 面 中 ,使 用 Server-Sent Events 技术 接收 a 





服务 端 所 推送 的 数据 ,然后 使 用 jquery. chart. js 插件 将 服务 端 推送 的 
数据 动态 显示 出 来 。chartReport. html 代码 如 下 所 示 。 
【案例 9-12】 chartReport. html 


图 9-4 项 目 结构 图 


<! doctype html> 
< htm]l > 
< head > 
<meta charset = "utf - 8"> 
<title> 销 售 数据 的 图 形 报表 统计 </title> 
< Script type = "text/javascript" src = "js/jquery- 1.x. js"></script> 
< script type = "text/javascript" src = "js/jquery. chart. js"></script > 
< link href = "css/layout.css" rel = "stylesheet" type= "text/css"/> 
</head> 
<body> 
<div class = "place">< span > 位 置 : </span> 
<ul class = "placeul"> 
<1li><a href =" 井 "> 首页 </a></1i> 
<1i><a href ="#"> 统 计 报表 </a></1i> 
</ul> 
</div> 
<div class = "canvasbody"> 
<div class = "usual"> 
< canvas id = "myCanvas1" width = "300" height = "300" 
style = "border:1px solid #ccc;margin - right:10px;"></canvas> 
< canvas id = "myCanvas2" width = "300" height = "300" 
style = "border:1px solid #ccc;margin— right:10px;"></canvas> 
<canvas id= "myCanvas3" width= "300" height = "300" 
style= "border:1px solid #ccc"></canvas> 
</div> 
</div> 
< script type = "text/javascript"> 
// 创 建 EventSource 对 象 
var dataEventSource = new EventSource("/events/"); 
// 设 置 onmessage 事件 处 理 方法 , 当 接收 到 服务 器 发 送 的 数据 时 调用 该 事件 
dataEventSource. onmessage = function(event){ 
// 获 得 服务 端 返回 的 销售 数据 
Var data = JSON. parse(event. data); 
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// 更 新 图 形 报表 
updateChart (data); 
}; 
// 设 置 onerror 事件 处 理 方法 , 当 发 生 错误 时 调用 该 事件 
dataEventSource. onerror = function(event){ 
dataEventSource. close( ); 
console. log(event); 
1 
// 使 用 指定 的 数据 更 新 图 形 报表 
function updateChart (data){ 
// 预 设 图 形 报表 中 的 各 部 分 的 颜色 
var options = {bgColor:[{drawColor:"#9cc507"}, 
{drawColor:" #8b86ca"}, 
{drawColor:"#ff4400"}, 
{drawColor:"#ffb81d"}, 
{drawColor:" #00b3e3"}] 
,frontColor:{ 
font:" 16px microsoft", 
color: "black" 
| 
}; 


// 绘 制 圆 饼 图 
$ ("#myCanvas1").drawChart(data, options, "PieChart" ); 
// 绘 制 柱状 图 
$ ("#myCanvas2").drawChart(data, options, "Columnar" ); 
// 绘 制 折线 
$ ("#myCanvas3").drawChart(data, options, "FoldLine" ); 
} 
</script > 
</body> 
</html> 


最 后 ,在 控制 台中 使 用 node app. js 命令 启动 Node. js 服务 器 ,然后 在 多 个 浏览 器 中 输 
入 http://localhost:3000/ 网 址 进行 测试 ,各 浏览 器 同步 接收 服务 端的 推送 数据 ,并 对 图 形 
报表 动态 更 新 ,运行 结果 如 图 9-3 所 示 。 


本 章 总 结 


在 浏览 器 和 服务 端 之 间 ,通过 请 求 / 响 应 模式 实现 数据 的 交互 。 

。 在 Server-Sent Events、WebSocket、 跨 文档 消息 传递 ,通道 消息 传递 和 广播 通道 等 技 
术 中 ,使 用 MessageEvent 接口 来 实现 消息 的 传递 。 

。 根据 传输 协议 ,可 将 客户 端 与 服务 端的 交互 技术 分 为 以 下 两 大 类 ,基于 TCP 协议 的 

WebSocket 规范 ; 基于 HTTP 协议 的 简易 轮 询 .COMET 技术 以 及 服务 器 推送 技术 

(Server-Sent Events) 。 

Server-Sent Events 规范 是 HTML 5 规范 的 一 个 重要 组 成 部 分 ,是 一 种 服务 端 与 客 

户 端的 单 向 通信 机 制 ,允许 服务 端 推送 数据 到 客户 端 ,又 称 单 向 消息 传递 。 
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。 Server-Sent Events 规范 由 通信 协议 和 EventSource 接口 两 部 分 组 成 。 通 信 协 议 是 
一 种 基于 纯 文 本 的 简单 协议 ,在 服务 端 需要 将 响应 内 容 的 类 型 设 为 text/event- 
stream 类 型 。 

。 在 服务 端的 响应 信息 中 ,每 一 行 都 由 类 型 .冒号 (: ) 和 数据 三 部 分 构成 ; 冒号 之 前 表 
示 该 行 的 数据 类 型 ,冒号 之 后 则 是 数据 内 容 。 

。 在 服务 端的 响应 信息 中 .数据 分 为 空白 、data、event.id 和 retry 五 种 类 型 。 














本 章 练习 

1. 当 浏览 器 发 出 请 求 时 ,服务 器 根据 所 收 到 的 请 求 返回 相应 的 响应 ,服务 器 的 响应 格 
式 通 常 为 或 等 。 

2. 在 Web 应 用 中 ,浏览 器 和 服务 器 之 间 通 过 / 模式 进行 交互 。 

3. 在 实时 与 服务 端 交 互 时 需要 使 用 服务 器 推送 技术 ,包括 基于 TCP 协议 的 
规范 和 基于 HTTP 协议 的 和 以 及 

4. Server-Sent Events 规范 由 和 接口 两 部 分 组 成 。 

5. 服务 器 的 响应 数据 类 型 分 为 5 和 五 
种 形式 。 

6. 在 Server-Sent Events、 跨 文档 消息 传递 ,通道 消息 传递 等 技术 中 ,使 用 接 
口 来 实现 消息 的 传递 。 

到 是 指 浏览 器 定时 向 服务 端 发 送 请 求 , 来 查询 服务 端 是 否 有 数据 更 新 。 

8. 规范 是 HTML 5 规范 的 一 个 组 成 部 分 ,是 一 种 服务 端 发 送 到 客户 端的 单 


向 通信 机 制 ,允许 服务 端 推送 数据 到 客户 端 ,又 称 单 向 消息 传递 。 





WebSocket 和 Notification 


ASS 本 章 目标 


。 了 解 WebSocket 通信 机 制 。 

。 熟悉 WebSocket API 接 口 。 

。 熟练 使 用 WebSocket 技术 实现 双向 通信 。 
。 了解 Notification 消息 提醒 机 制 。 

。 熟练 使 用 Notification 技术 实现 消息 提醒 。 


10.1 WebSocket 概述 


为 保证 Web 应 用 与 服务 端 通信 的 实时 性 ,可 以 使 用 传统 的 简单 轮 询 或 COMET 技术 ， 
也 可 以 使 用 HTML 5 规范 中 新 增 的 Server-Sent Events 或 WebSocket 技术 。 其 中 ,Server- 
Sent Events 是 一 种 单 向 消息 传递 基于 HTTP 协议 的 服务 器 推送 技术 。 当 客户 端 与 服务 端 
需要 双向 传递 信息 时 ,需要 通过 WebSocket 技术 来 实现 , WebSocket 是 一 种 基于 TCP 协议 
的 服务 端 和 客户 端 双向 通信 技术 ,服务 端 能 够 主动 向 客户 端 发 送信 息 ,同时 客户 端 也 能 够 向 
服务 端 发 送信 息 。 

WebSocket 是 一 种 基于 TCP 协议 的 通信 技术 ,与 传统 的 HTTP 有 一 定 的 区 别 : 
HTTP 是 一 种 基于 请 求 与 响应 模式 的 、 无 状态 的 、 应 用 层 的 协议 ,每 次 访问 服务 端 时 都 需要 
发 出 请 求 ,建立 连接 、 返 回响 应 内 容 和 断 开 连 接 。 而 WebSocket 在 客户 端 第 一 次 访问 服务 
端 时 建立 连接 ,在 此 连接 的 基础 上 实现 客户 端 与 服务 端 之 间 的 多 次 信息 交互 ,直到 客户 端 断 
开 连 接 为 止 ,如 图 10-1 所 示 。 


10.1.1 WebSocket 接口 


HTML 5 规范 中 提供 了 WebSocket API, 是 一 种 客户 端 和 服务 端 进行 双向 通信 的 公共 
接口 ,该 接口 的 请 法 格式 如 下 。 
【语法 】 
interface WebSocket :EventTarget{ 
readonly attribute DOMString url; 


// ready state 
const unsigned short CONNECTING = 0; 
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const unsigned short OPEN= 1; 

const unsigned short CLOSING = 2; 

const unsigned short CLOSED = 3; 

readonly attribute unsigned short readyState; 
readonly attribute unsigned long bufferedAmount; 


// networking 

attribute Function onopen; 

attribute Function onerror; 

attribute Function onclose; 

readonly attribute DOMString extensions; 

readonly attribute DOMString protocol; 

void close(optional unsigned short code, optional DOMString reason); 


// messaging 

attribute Function onmessage; 
attribute DOMString binaryType; 
void send(DOMString data); 

void send(ArrayBuffer data); 
void send(Blob data); 


其 中 : 

。 url 属性 (只 读 ) 用 于 返回 创建 WebSocket 对 象 时 所 传人 的 url 参数 ; 

readyState 属性 (只 读 ) 表 示 连 接 状 态 , 取 值 范围 是 CONNECTING( 连 接 建 立 中 ,还 
未 完成 )、OPEN (连接 建立 完毕 ,可 以 发 送信 息 )、CLOSING (连接 正在 关闭 ) 和 
CLOSED( 连 接 已 经 关闭 ) 四 种 状态 ; 

bufferedAmount 属性 (只 读 ) 用 于 返回 排队 等 待 传输 且 还 未 发 出 的 文本 字 节 数 ; 

。 send() 方 法 用 于 将 数据 data 发 送 到 服务 端 。 





| WebSocket 


客户 端 服务 端 


发 出 请 求 























mm 连接 时 长 





图 10-1 HTTP 与 WebSocket 的 区 别 


除 此 之 外 , WebSocket 接口 提供 了 一 套 完整 的 事件 模型 ,用 于 捕获 浏览 器 与 服务 器 交 
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互 过 程 的 各 种 状态 ,具体 见 表 10-1。 
表 10-1 WebSocket 事件 机 制 

















事 件 描 述 
onopen 当成 功 与 服务 器 建立 连接 时 触发 该 事件 
onmessage 当 从 服务 器 接收 到 数据 时 触发 该 事件 
onerror 当 出 现 错误 时 触发 该 事件 

onclose 当 连 接 关 闭 时 触发 该 事件 


10.1.2 基于 Java 的 WebSocket 示例 

新 建 一 个 JavaWeb 项 目 , 在 项 目 中 创建 一 个 WebSocketServer 类 ,作为 应 用 程序 的 
WebSocket 服务 端 , 当 客户 端 向 服务 端 发 出 连接 请 求 时 ,创建 一 个 请 求 连接 并 监听 客户 端 
的 请 求 状态 ,代码 如 下 所 示 。 

【案例 10-1】 WebSocketServer. java 


import java. io, IOException; 
import javax. websocket. OnClose; 
import javax. websocket. OnMessage; 
import javax. websocket. OnOpen; 
import javax. websocket. Session; EE 
import javax. websocket. server. ServerEndpoint; 案例 视频 讲解 





@ServerEndpoint("/websocketTest") 
public class WebSocketServer{ 
/* * 当 服 务 器 接收 到 客户 端 发 送 的 消息 时 所 调用 的 方法 * / 
@OnMessage 
public void onMessage( String message, Session session) 
throws IOException, InterruptedException{ 
// 打印 从 客户 端 获取 到 的 信息 
System. out. println(" 从 客户 端 接收 到 的 信息 :" + message) ; 
int sentMessages = 1; 
while (sentMessages <4){ 
Thread. sleep(2000); 
session. getBasicRemote(). sendText (sentMessages + ""); 
SentMessages++ 7 
} 
} 
/x* * 当 用 户 建立 连接 时 调用 该 方法 */ 
@onOpen 
public void onOpen( Session session){ 
System. out. println(" 客 户 端 连接 成 功 "); 
} 
/* * 当 用 户 断 开 连 接 时 调用 该 方法 * / 
@OnClose 
public void onClose( ){ 
System. out. println(" 客 户 端 关闭 "); 
} 
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上 述 代码 中 创建 了 一 个 WebSocket 服务 端 , 当 客户 端 与 服务 端 建立 连接 时 将 调用 
onOpen() 方 法 , 当 客户 端 向 服务 端 发 送信 息 时 将 调用 onMessage() 方 法 , 当 客 户 端 断 开 连 
接 时 将 调用 onClose() 方 法 。 


~“ 在 Tomcat 7 中 提供 了 WebSocketServlet 类 ,但 该 类 目前 已 经 过 时 ,并 在 Tomcat 8 
这 中 彻底 将 其 废弃 ,可 以 通过 @ServerEndpoint 注解 的 形式 来 定义 一 个 WebSocket 服 


接 下 来 ,创建 一 个 WebSocket 客户 端 ,用 于 实现 客户 端 与 服务 端的 数据 交互 ,代码 如 下 
所 示 。 
【案例 10-2】 WebSocketTest. html 


<! DOCTYPE html > 
<html> 
<head> 
< title> HTML5 WebSocket 测试 </title> 
< style type = "text/css"> 
img{width:100px;} 
</style> 
</head> 
<body> 
<div> 
用 户 名 : < input type = "text" id = "userName" value = "jCuckoo"/> 
< input type = "button" value = "推荐 直播 频道 " onclick = "start()"/> 
</div> 
<div id= "messages"></div> 
< script type = "text/javascript"> 
Var webSocket = new WebSocket 
('ws://localhost:8080/WebSocket/websocketTest'); 
// 发 生 错误 时 调用 该 方法 
webSocket. onerror = function(event){ 
alert(event. data); 
}; 
// 与 WebSocket 建立 连接 
webSocket. onopen = function(event){ 
document. getElementById!( 'messages'). innerHTML 
= '< h2 > 与 服务 端 建立 连接 </h2>< hr/>'; 


}; 
// 处 理 服务 器 返回 的 信息 
webSocket. onmessage = function(event){ 
console. log(event. data); 
document. getElementById( 'messages'). innerHTML 
+= << img src= "images/broadcast 0'+ event. data+ '.jpg"/>'; 
}; 
function start(){ 
// 向 服务 器 发 送 请 求 
var UserName = document. getElementBYId("userName" ) . value; 
webSocket. send( ' 我 是 ' + userName) ; 
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} 
</script > 
</body> 
</html > 


运行 代码 ,在 浏览 器 中 输入 http://localhost: 8080/WebSocket/WebSocketTest. html 
网 址 进行 测试 。 当 客户 端 成 功 连接 到 服务 端 时 ,服务 端 向 客户 端 连续 发 送 三 次 数据 ; 客户 
端 将 所 收 到 的 数据 在 页 面 中 这 染 出 来 ,效果 如 图 10-2 所 示 。 

单 击 “ 推 荐 直播 频道 ”按钮 时 ,将 用 户 名 发 送 到 服务 端 ; 在 服务 端 使 用 WebSocket 服务 
接收 客户 端 所 发 送 的 数据 ,并 在 控制 台中 打印 提示 信息 ,如 图 10-3 所 示 。 


[EE 
DD) HTMLS WebSocketR= x 


© [© localhost8080/Websocke.. 人 | : | 


用 户 名 : 及 台大 侠 | [ 扒 直 播 肝 道 | 


与 服务 端 建立 连接 








Ps 目 consolke 3 
8 Tomcat v8.0 Server at localhost [Apache Tomcat]| 
© rs 客户 过 接 成 功 

美女 直播 


从 客户 端 接收 到 的 信息 ; 我 是 游戏 大 侠 





图 10-2 客户 端 接收 服务 端 所 发 送 的 信息 图 10-3 服务 端 控制 台 提示 信息 


10.1.3 基于 Node.js 的 WebSocket 示例 


新 建 一 个 Node. js 项 目 ,在 控制 台中 使 用 npm init 命令 对 项 目 进行 初始 化 ,然后 分 别 使 
用 npm install express --save-dev 和 npm install ws --save-dev 命令 来 安装 项 目 中 所 依赖 的 
Express 和 WebSocket 资源 包 , 资 源 包 安 装 完毕 后 ,package. json 配置 文件 中 的 内 容 如 下 
所 示 。 

【案例 10-3】 package. json 


{ 
"name" : "websocket", 
"version”:"1.0.0", 
"description":"", 
"main":"index. js", 
"scripts":{ 
"test":"echo\"Error:no test specified\"g&exit 1" 
}, 
"author" :"jCuckoo", 
"license" :"ISC", 
"devDependencies":{ 
"express":""4.15.3", 
oa 30N0" 
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在 项 目 根 目 录 下 ,创建 一 个 app. js 文件 ,作为 服务 端的 路 由 文件 ; 在 该 文件 中 创建 一 个 
WebSocket 服务 用 于 监听 8088 端口 ,创建 一 个 HTTP 服务 用 于 监听 3000 端口 ,代码 如 下 
所 示 。 

【案例 10-4】 app.js 


Var express = require( 'express'); 
const http = require( 'http'); 
const WebSocket = require( 'ws'); 
Var app = express(); 
// 设 置 默认 访问 的 静态 资源 目录 
app. use( express. static( 'public')); 
// 设 置 HTTP 服务 的 监听 端口 
app. set( 'port', process. env. PORT| |3000); 
app. listen(app. get( 'port'), function(){ 
console. log( "Express started on http://localhost:" + app. get( 'port') 
+ ' press Ctrl — C to terminate. '); 


D); 


// 浏 览 器 访问 localhost 会 输出 一 个 html 文件 
app. get( '/', function(req, res){ 

res. type( 'text/html '); 

res. sendFile(__dirname + '/index. html'); 
1D); 


const server = http. createServer (app); 
// 创 建 一 个 WebSocket 服务 端 
const wss = new WebSocket. Server( {server} ); 
// 当 客户 端 连接 WebSocket 服务 端 时 ,调用 相应 的 回调 方法 
wss. on( 'connection', function connection(ws, req){ 
// 当 从 客户 端 获得 数据 时 ,对 数据 进行 处 理 并 返回 
ws.on( "message' function incoming(message){ 
console. log( 'received: %s',message); 
ws. send( ' 你 好 <b>< font color = "red">' + message 
+ </b></font>, 有 什么 可 以 为 您 服务 的 吗 ? '); 
]) 
// 连 接 建 立成 功 时 ,向 客户 端 发 送 提示 信息 
Ws. send( '< font color = "blue"> 与 服务 端 连 接 成 功 , 当前 是 青岛 I 号 视频 服务 器 !</font >'); 
]) 
// 设 置 Websocket 的 监听 端口 
server. listen(8088, function listening(){ 
console. log( 'Listening on %d', server.address().port); 
DD); 


上 述 代码 中 ,使 用 require() 方 法 连续 加 载 express、http 和 ws 三 个 应 用 框架 ,其 中 
express 框架 用 作 服 务 端 的 路 由 ,根据 用 户 的 url 请 求 分 配 到 对 应 的 处 理 程序 ; http 框架 用 
于 创建 一 个 http 服务 来 监听 3000 端口 ,用 于 响应 用 户 的 HTTP 请 求 ; ws 框架 作为 服务 端 
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的 WebSocket 来 监听 8088 端口 ,用 于 处 理 客户 端的 WebSocket 请 求 。 

在 项 目的 根 目 录 下 ,新 建 一 个 index. html 页 面 ,在 页 面 中 创建 了 一 个 WebSocket 客户 
端 ,并 绑 定 onopen、onmessage 等 事件 处 理 方法 ,代码 如 下 所 示 。 

【案例 10-5】 index. html 


<!DOCTYPE html > 
<html> 
<head> 
< title > HTML5 WebSocket 测试 </title> 
</head> 
<body> 
<div> 
< img src = ". /images/banner. png" height = "120px"/><br/> 
用 户 名 : < input type = "text" id = "userName"/> 
< input type = "button" value = "Start" onclick = "start()"/> 
</div> 
<div id= "messages"></div> 
< script type = "text/javascript"> 
var webSocket = new WebSocket( 'ws://localhost:8088"); 
webSocket. onerror = function(event){ 
alert(event. data); 
}; 
// 与 WebSocket 建立 连接 
webSocket. onopen = function(event){ 
document. getElementById( 'messages'). innerHTML = ' 与 视频 服务 端 建立 连接 '; 
}; 
// 处 理 服务 端 返回 的 信息 
webSocket. onmessage = function(event){ 
document. getElementById( 'messages') . innerHTML += event. data + '< br/>'; 
}; 
function start(){ 
// 向 服务 端 发 送 请 求 
Var userName = document. getElementById( 'userName'). value; 
webSocket. send(userName); 
} 
</script > 
</body> 
</html > 


在 控制 台中 ,使 用 node app. js 命令 来 启动 Node. js 服务 器 ,在 浏览 器 中 输入 http:// 
localhost:3000/ 网 址 进行 测试 ; 在 用 户 名 文本 框 中 输入 jCuckoo 时 , 单 击 “发 送 ” 按 钮 ,在 
start() 方 法 中 调用 webSocket. send() 方 法 将 用 户 名 发 送 到 服务 端 。 当 服务 端 接收 到 客户 
端 所 发 送 的 数据 时 ,调用 message 事件 的 回调 方法 对 数据 进行 处 理 , 然 后 将 处 理 结果 返回 到 
客户 端 ,效果 如 图 10-4 所 示 。 
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与 视频 服务 端 建立 连接 
与 服务 端 连接 成 功 ， 当 前 是 青岛 {号 视频 服 器 ! 





你 好 jCuckoo , 有 什么 可 以 为 您 服务 的 吗 ? 














10-4 客户 端 接收 服务 端 所 发 送 的 信息 


10.2 ” Notification 概述 


Web Notifications 是 HTML 5 中 一 个 令 人 欣喜 的 新 特性 ,该 特性 支持 开发 者 配置 和 显 
示 浏 览 器 客户 端的 桌面 通知 ,为 用 户 提供 更 好 的 体验 ; 即使 用 户 忙于 其 他 工作 ,浏览 器 处 于 
最 小 状态 时 也 能 够 弹出 来 自 页 面 的 消息 通知 ,如 新 邮件 的 提醒 、 在 线 聊 天 室 的 新 消息 提醒 
等 。 使 用 Notification 技术 所 产生 的 消息 不 依附 于 某 个 页 面 ,而 是 依附 于 整个 浏览 器 。 

在 Notification 接口 中 , 提供 了 一 系列 的 属性 和 方法 ,用 于 判断 浏览 器 是 否 支 持 
Notification 通知 ,是否 开启 通知 权限 .设置 提示 内 容 、. 显 示 提 示 消 息 .关闭 通知 等 ,该 接口 的 
语法 格式 如 下 。 

【语法 】 


interface Notification: EventTarget{ 
static readonly attribute NotificationPermission permission; 
readonly attribute DOMString title; 
readonly attribute NotificationDirection dir; 
readonly attribute DOMString lang; 
readonly attribute DOMString body; 
readonly attribute DOMString tag; 
readonly attribute DOMString icon; 
static void requestPermission(optional callback); 
void close( ); 
attribute EventHandler onclick; 
attribute EventHandler onshow; 
attribute EventHandler onerror; 
attribute EventHandler onclose; 
}; 


其 中 ， 
。 permission 属性 (只 读 ) 用 于 返回 当前 浏览 器 是 否 具有 显示 通知 的 权限 ,其 中 denied 
(上 默认) 表示 用 户 拒绝 显示 通知 ,granted 表示 用 户 接收 显示 的 通知 ; 
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title 属性 (只 读 ) 表 示 通 知 的 标题 ; 
dir 属性 (只 读 ) 表 示 通 知 文本 的 排列 方向 , 取 值 可 以 为 auto、ltr( 从 左 向 右 ) 和 rtl( 从 
右 向 左 ); 
lang 属性 (只 读 ) 表 示 通 知 的 语言 代码 ; 
body 属性 (只 读 ) 表 示 通 知 体 ; 
tag 属性 (只 读 ) 表 示 通 知 的 标记 ; 
icon 属性 (只 读 ) 表 示 通 知 的 图 标 URL; 
requestPermission() 方 法 用 于 请 求 用 户 授权 显示 通知 ; 
close() 方 法 用 于 关闭 当前 通知 窗口 。 


除 此 之 外 ,Notification 接口 提供 了 一 套 完整 的 事件 模型 ,用 于 响应 Notification 的 各 种 
状态 ,具体 见 表 10-2。 


表 10-2 Notification 事件 机 制 











事件 描 述 

onclick 当 单 击 通知 窗口 时 触发 该 事件 
onshow 当 显示 通知 时 触发 该 事件 

onerror 当 出 现 错误 时 触发 该 事件 

onclose 当 连 接 关闭 通知 窗口 时 触发 该 事件 








当 创 建 Notification 对 象 时 ,需要 为 其 构造 方法 提供 title 和 options 两 个 参数 ,其 中 
title 参数 用 于 设置 通知 的 标题 ,options 参数 是 NotificationOptions 类 型 ,用 于 设置 为 通知 
提供 基本 信息 。NotificationOptions 类 型 的 语法 格式 如 下 。 

【语法 】 


dictionary NotificationOptions{ 


}; 


NotificationDirection dir = "auto"; 
DOMString lang= ""; 

DOMString body; 

DOMString tag; 

DOMString icon; 


下 述 代码 演示 了 使 用 Notification() 构 造 方法 来 创建 一 个 通知 ,并 将 通知 显示 出 来 。 
【案例 10-6】 notification. html 


<!DOCTYPE html > 
<html> 


<head> 
<meta charset = "UTF 一 8"> 
<title> 通 知 测试 </title> 
</head> 
<body> 
<script> 
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var options={ 
body: ' 今 天 发 奖金 , 速 来 财务 领取 ! '， 
icon:"images/notice. png" 

. 

var notification = new Notification(" 重 要 通知 ", options); 

notification. onshow = function(){ 
//setTimeout(notification. close, 5000); 
setTimeout (function( ){ 

notification. close(); 

}, 5000); 

} 

</script > 
</body> 
</html > 





上 述 代码 中 ,首先 定义 一 个 NotificationOptions 对 








| 重要 通 x 
象 ,用 来 设置 通知 的 内 容 和 图 标 。 通 过 Notification() 构 © ni 
造 方法 来 创建 一 个 通知 ,效果 如 图 10-5 所 示 。 当 aaa 于 
Notification 通知 显示 5s 后 ,将 自动 关闭 通知 窗口 。 图 10-5 通知 窗口 


下 述 代 码 演 示 了 使 用 Notification 接口 的 
permission 属性 来 判断 浏览 器 是 否 授权 显示 Notification 通知 。 当 浏览 器 授权 显示 
Notification 通知 时 , 则 弹出 通知 窗口 ,否则 提示 用 户 是 否 授权 浏览 器 "显示 通知 ”。 

【案例 10-7】 notificationAllow. html 


<!DOCTYPE html > 
< html > 
<head> 
<meta charset = "UTF — 8"> 
<title > 通知 应 用 示例 </title> 





[obs 卫 
案例 视频 讲解 


</head> 
<body> 
<script> 
if(Notification. permission == = 'granted'){ 
// 浏 览 器 支持 Notification 时 ,执行 以 下 代码 
alert(' 浏 览 器 支持 Notification! ') 
showNotification(); 
Jelse{ 
// 弹 出 开启 权限 提示 框 
Notification. requestPermission( showNotification); 
} 
// 显 示 通知 窗口 


function showNotification(){ 
var options={ 
body: ' 今 天 发 奖金 , 速 来 财务 领取 ! '， 
icon: "images/notice. png" 
} 


var notification = new Notification(" 重 要 通知 ", options); 
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notification. onshow = function(){ 
//setTimeout(notification. close, 5000); 
setTimeout (function(){ 

notification. close(); 

},5000); 

} 

notification. onclick = function(){ 
alert( ' 已 查看 通知 ,发 送 回执 信息 ! ); 
notification. close(); 

}; 

} 
</script> 
</body> 
</html > 


上 述 代码 运行 时 ,首先 判断 浏览 器 是 否 授权 显示 Notification 通知 , 当 浏览 器 授权 显示 
Notification 通知 时 , 则 弹出 提示 信息 ,如 图 10-6 所 示 , 单 击 “ 确 定 ” 按 钮 后 显示 通知 窗口 ,如 
图 10-5 所 示 。 

当 浏 览 器 未 授权 显示 Notification 通知 时 , 则 弹出 “显示 通知 ”授权 窗口 ,如 图 10-7 所 
示 。 当 单 击 “ 允 许 ” 按 钮 时 ,对 当前 网 站 (此 处 为 http://127. 0. 0. 1) 进 行 授权 ,使 其 能 够 通过 
浏览 器 显示 Notification 通知 ; 当 单 击 “ 禁 止 ” 按 钮 时 ,禁止 当前 网 站 使 用 Notification 通知 。 


X [@ 127.0.0.1:8020/ 章 源码 /chapterl( Q 女 ] 将: 1 
WV DO wasmasm x 
© [© 127.00.1:8020/ 训 5 源 B/chaptel0 @ 让 | W 


127.0.0.1:8020 显示 : 
浏 鉴 吴 允许 显示 Notification 通 知 ! 
x 





httpV/127.00.1.8020 想 要 : 
音 时 直通 知 














Ls | se | 








10-6 浏览 器 允许 显示 Notification 通知 图 10-7 ”Notification 授权 


10.3 网 络 聊 天 室 


下 面 实 现 一 个 网 络 聊天 室 ,使 用 WebSocket 技术 实现 客户 端 与 服务 端的 实时 交互 ,使 
用 Notification 技术 来 实现 对 客户 端的 消息 提醒 ,服务 端 可 以 采用 Servlet 或 Node. js 技术 。 

聊天 室 的 主 界面 如 图 10-8 所 示 。 当 用 户 输入 服务 器 地 址 、 端 口号、 昵称 后 , 单 击 * 登 录 ” 
按钮 进入 聊天 室 ,所 有 在 线 用 户 都 将 收 到 用 户 上 线 通知 ,如 图 10-9 所 示 , 当 用 户 离线 时 ,所 
有 在 线 用 户 都 将 收 到 用 户 离线 通知 。 

当 用 户 登 录 聊 天 室 时 ,服务 端 使 用 WebSocket 向 所 有 在 线 用 户 发 送 在 线 用 户 列表 数 
据 ,并 更 新 在 线 用 户 列 表 。 当 用 户 输入 聊天 内 容 , 单 击发 送 ? 按 钮 时 服务 端 对 所 有 在 线 用 户 
进行 广播 ,以 便 所 有 用 户 收 到 聊天 内 容 ,效果 如 图 10-10 所 示 。 
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10-9 用 户 上 线 提示 
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图 10-10 ”聊天 室 主 窗口 


10.3.1 聊天 室 客 户 端 公共 模块 
在 聊天 系统 中 ,用 户 上 线 和 用 户 离线 都 是 使 用 Notifications 通知 来 实现 的 ,代码 如 下 。 
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【案例 10-8】 notification. js 





var NotificationHandler = { 回 
isNotificationSupported: 'Notification' in window, b+ 
isPermissionGranted:function(){ 了 

return Notification. permission = "granted ' 名 
jo 案例 视频 讲解 


requestPermission:function(){ 
if (!this. isNotificationSupported){ 
console. 1og( ' 当 前 浏览 器 不 支持 Notification API'); 
return; 
上! 
Notification. requestPermission(function(status){ 
console. log( 'status:' + status); 
Var permission = Notification. permission; 
console. log( 'permission:'+ permission); 
1); 
}, 
showNotification:function(userName, status){ 
if(!this. isNotificationSupported){ 
console. 1og( ' 当 前 浏览 器 不 支持 Notification API'); 
return; 
9 
if(!this. isPermissionGranted()){ 
console. 1og( ' 当 前 页 面 未 被 授权 使 用 Notification 通知 '); 
return; 
} 
var n= new Notification(" 您 有 一 条 新 消息 ", { 
icon: 'images/cat. jpg', 
body:""" + userName + '" 用 户 '+ status, 
tag: "tag" 
1); 
n.onshow = function( ){ 
console. log( ' 显 示 通 知 信息 '); 
//5s 后 自动 关闭 消息 框 
setTimeout(function(){ 
n.close(); 
}, 5000); 
}; 
n.onclick = function( ){ 
alert(' 查 看 上 线 用 户 信 息 '); 
n.close(); 
}; 
n. onerror = function( ){ 
console. 1og( ' 发 生 错 误 '); 
}; 
n.onclose= function(){ 
console. 1og( ' 关 闭 通 知 窗口 '); 
}; 


}; 
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10.3.2 基于 Java 的 网 络 聊天 室 


下 述 代码 使 用 Java 语言 作为 聊天 室 的 服务 端 技 术 ,User 类 用 于 封装 用 户 的 基本 信息 ， 
包括 用 户 昵称 、 登 录 时 间 、 用 户头 像 等 信息 ,本 案例 中 用 户头 像 是 随机 生成 的 ,读者 可 以 根据 
需要 在 用 户 登 录 时 为 用 户 提供 选择 头像 的 功能 。 

【案例 10-9】 User. java 


import java. util. Date; 
public class User{ 
private String userName; 
private Date loginTime; 
private String headImage; 
public User(){ 
super(); 
public User(String userName, Date loginTime){ 
super(); 
this. userName = userName; 
this. loginTime = loginTime; 


} 
public User(String userName, Date loginTime, String headImage){ 
super(); 
this. userName = userName; 
this. loginTime = loginTime; 
this. headImage = headImage; 


public String getUserName( ){ 
return userName; 

} 

public void setUserName(String userName){ 
this. userName = userName; 

b 

public Date getLoginTime( ){ 
return loginTime; 

. 

public void setLoginTime(Date loginTime) { 
this. loginTime = loginTime; 

} 

public String getHeadImage( ){ 
return headImage; 

上 

public void setHeadImage(String headImage){ 
this. headImage = headImage; 

} 


Message 类 用 于 封装 用 户 的 聊天 记录 ,其 中 包括 聊天 用 户 、 聊 天 信息 、 发 送 时 间 等 ,代码 
如 下 所 示 。 
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【案例 10-10】 Message. java 


public class Message{ 
private User user; 
private String chatMessage; 
private String time; 
public Message( ){ 


super(); 
1 
public Message(User user, String chatMessage, String time){ 
super(); 
this. user = user; 
this. chatMessage = chatMessage; 
this. time = time; 
} 


public User getUser( ){ 
return user; 

public void setUser(User user){ 
this. user = user; 

} 

public String getChatMessage(){ 
return chatMessage; 

} 

public void setChatMessage( String chatMessage){ 
this. chatMessage = chatMessage; 

} 

public String getTime( ){ 
return time; 

} 

public void setTime(String time){ 
this. time = time; 


接 下 来 ,使 用 WebSocket 技术 实现 聊天 室 的 服务 端 。 当 用 户 登 录 时 ,将 用 户 的 登录 信 
息 保存 到 服务 端的 在 线 用 户 集合 中 ; 当 用 户 发 送 聊 天 信息 时 ,对 用 户 集合 进行 遍历 并 广播 
聊天 内 容 , 代 码 如 下 所 示 。 

【案例 10-11】 ChatWebSocketServer. java 


import java. io. IOException; 

import java. util. *; 

import javax. websocket. *; 

import javax. websocket. server. ServerEndpoint; 
import com. jCuckoo. entity. *; 

import net. sf. json. *; 
@ServerEndpoint("/chatRoomWebsocket") 

public class ChatWebSocketServer{ 
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private static final Set< Session > connections = new HashSet < Session>(); 
private User user; 
private Session session; 
Private static final Map< String, User> userList = new HashMap < String, User >(); 
private static final ArrayList < Message > chatList = new ArrayList < Message >(); 
private String[ ] headImages = {"head1", "head2", "head3", "head4", "head5"}; 
/x 
* 当 服 务 器 接收 到 客户 端 发 送 的 消息 时 所 调用 的 方法 
# 该 方法 可 能 包含 一 个 javax. websocket. Session 可 选 参数 
* 如 果 有 这 个 参数 ,容器 将 会 把 当前 发 送 消息 客户 端的 连接 Session 注入 进去 
*/ 
@OonMessage 
public void onMessagel( String message, Session session) throws IOException{ 
// 打 印 从 客户 端 获 取 到 的 信息 
System. out. println(" 从 客户 端 接收 到 的 信息 : " + message); 
JSONObject jsonObject = JSONObject. fromObject (message); 
String op = jsonObject. getString("op"); 
if ("login". equals(op)){ 
String userName = jsonObject. getString("userName" ); 
Date loginTime = new Date( ); 
int index = (int) (Math. random() * (headImages. length) ) ; 
User user = new User(userName, loginTime, headImages[ index] ); 
this. user = user; 
userList. put( session. toString( ), user); 
broadCast (getUsersOnLine( )); 
broadCast (getNewUser (userName) ) ; 
// 发 送 用 户 登录 会 话 
session. getBasicRemote( ). sendText(getUserWithSession(session) ); 
Jelse if("chat". equals(op)){ 
String sessionId = jsonObject. getString("sessionId"); 
String chatMessage = jsonObject. getString("chatMessage" ) ; 
String time = jsonObject. getString("time"); 
User user = userList. get( sessionId); 
Message m= new Message(user, chatMessage, time); 
chatList.add(m); 
broadCast (getMessage( ) ); 


. 
/x 
* 当 一 个 新 用 户 连 接 时 所 调用 的 方法 
# 该 方法 包含 一 个 javax. websocket. Session 可 选 参数 
* 如 果 有 这 个 参数 ,容器 将 会 把 当前 发 送 消息 客户 端的 连接 Session 注入 进去 
x*/ 
@oOnOpen 
public void onOpen(Session session){ 
System. out. println(" 客 户 端 连接 成 功 "); 
this. session = session; 
connections.add( session); 
} 
// 当 一 个 用 户 断 开 连 接 时 所 调用 的 方法 
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@OnClose 
public void onClose( Session session){ 
System. out. println(" 客 户 端 关闭 "); 
User userOffLine = userList. get(session. toString()); 
userList. remove( session. toString()); 
connections. remove( session); 
// 发 送 用 户 下 线 提示 信息 
broadCast (getUserOffLine(userOffLine. getUserName( ) )); 
// 当 用 户 下 线 时 ,更 新 在 线 用 户 列表 
broadCast (getUsersOnLine( )); 
} 
// 向 客户 端 以 数组 形式 发 送 在 线 用 户 列表 ,例如 : ["jerry", "jCuckoo"] 
public void broadCast(String message){ 
for(Session session:connections){ 
try{ 
session. getBasicRemote( ) . sendText (message); 
System. out. println(message); 
} catch( IOException e){ 
connections. removel( session); 
broadCast (message); 


’ 

public String getUserWithSession(Session session){ 
JSONObject jsonObject = new JSONObject(); 
jsonObject. put ("sessionId", session. toString()); 
jsonObject. put ("contentType", "userSession"); 
System. out. println(jsonObject. toString( )); 
return jsonObject. toString(); 

} 

// 对 刚 上 线 的 用 户 进行 封装 ,封装 成 JSON 对 象 ,一 般 返回 到 客户 端 

public String getNewUser(String userName){ 
JSONObject jsonObject = new JSONObject(); 
jsonObject. put ("userName", userName); 
jsonObject. put ("contentType", "newUserOnLine" ); 
return jsonObject. toString(); 

} 

// 对 刚 上 线 的 用 户 进行 封装 ,封装 成 JSON 对 象 ,一 般 返 回 到 客户 端 

public String getUserOffLine(String userName){ 
JSONObject jsonObject = new JSONObject(); 
jsonObject. put ("userName", userName); 
jsonObject. put ("contentType", "userOffLine"); 
return jsonObject. toString(); 

} 

// 获 得 在 线 用 户 , 并 封装 成 JSON 对 象 类 型 的 字符 串 

public String getUsersOnLine(){ 
Object [] users = userList. values().toArray(); 
JSONObject jsonObject = new JSONObject(); 
jsonObject. put ("users", users); 
jsonObject. put ("contentType", "userOnLineList"); 
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return jsonObject. toString(); 
b 
public String getMessage( ){ 
JSONObject jsonObject = new JSONObject(); 
jsonObject. put ("contentType", "chatMessages"); 
jsonObject. put ("messages", JSONArray. fromObject (chatList)); 
return jsonObject. toString(); 


上 述 代码 中 ,使 用 sessionId 作为 用 户 的 唯一 标记 ,以 区 分 不 同 的 用 户 , 当 客户 端 第 一 次 
与 服务 端 交 互 时 ,由 服务 端 根据 用 户 Session 来 生成 一 个 sessionId ,并 发 送 到 客户 端 。 

在 web. xml 文件 中 配置 欢迎 页 面 , 代 码 如 下 所 示 。 

【案例 10-12】 web. xml 


<?xml version = "1.0" encoding = "UTF - 8"?> 
<web— app xmlns:xsi= "http://www.w3.org/2001/XMLSchema — instance” 
xmlns = "http://java, sun. com/xml/ns/javaee" 
xsi:schemaLocation = "http://java. sun. com/xml/ns/javaee 
http://java. sun. com/xml/ns/javaee/web— app_2_5.xsd" 
id= "WebApp_ID" version= "2.5"> 
< display - name > ChatRoom modify </display - name> 
< Welcome — file— list> 
< welcome - file> chatRoom. jsp </welcome — file> 
</welcome - file— list> 
</web— app> 


当 用 户 登录 或 用 户 发 送 聊 天 内 容 时 , 均 通 过 WebSocket 客户 端 向 服务 端 发 送 数据 ,并 
将 sessionId 一 并 发 送 给 服务 端 ,服务 端 根 据 sessionId 来 区 分 客户 端 。 当 服务 端的 数据 发 
生变 化 时 ,将 数据 发 生 到 客户 端 ,由 客户 端 WebSocket 接收 数据 并 通过 DOM 操作 实现 页 
面 的 更 新 。WebSocket 客户 端 代码 如 下 所 示 。 

【案例 10-13】 clientWebSocket. js 


var serverAddress = document. getElementById("serverAdress").value; 
var serverPort = document. getElementById("serverPort"). value; 
//var url = ws://localhost:8080/ChatRoom/chatRoomWebsocket' 
var url = "ws://" + serverAddress +":"+ serverPort 
+ "/ChatRoom java/chatRoomWebsocket"; 
Var webSocket = new WebSocket (url); 
Var userName; 
// 用 户 注册 
function loginUser(){ 
userName = document. getElementBYId("userName" ) . value; 
var user = new User("login", userName); 
// 界 面 模块 切换 
document. getElementById("chatPart"). style. display = "block"; 
document. getElementById("configure"). style. display = "none"; 
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document. getElementById("messages"). style. display = "block"; 
document. getElementById("connectStatus"). style. display = "none"; 
document. getElementById("serverAdressTxt"). innerHTML = serverAddress; 
document. getElementById("serverPortTxt"). innerHTML = serverPort; 
document. getElementById("userNameTxt"). innerHTML = userName; 
// 发 送 注册 信息 
webSocket. send(JSON. stringify(user)); 

} 

// 发 送 聊 天 信息 

function sendMessage( ){ 
var chatMessage = document. getElementById("chatMessage").value; 
var sessionId = document. getElementById("sessionId").value; 
Var message = new Message( "chat", sessionId, chatMessage, getTime( )); 
webSocket. send(JSON. stringify(message) ); 


| 

function User(op, userNanme){ 
this. op = op; 
this,. userName = userName; 

上 

function Message(op, sessionId, chatMessage, time){ 
this. op = op; 
this. sessionId = sessionId; 
this. chatMessage = chatMessage; 
this. time = time; 

9 


function getTime( ){ 
var now = new Date( ); 
return now. getFullYear() + "/" + (now. getMonth() +1) + "/" + now.getDate() 
+" "+now.getHours() +":"+now.getMinutes() +":"+now.getSeconds(); 
上 
webSocket. onerror = function(event){ 
alert(event. data); 
}; 
// 与 WebSocket 建立 连接 
webSocket. onopen = function(event){ 
document. getElementById( 'connectDiv'). className = "online — img"; 
}; 
// 处 理 服务 器 返回 的 信息 
webSocket. onmessage = function(event){ 
Var userList = ""; 
Var messageList = ""; 
var returnContent = eval("(" + event.data+")")7 
if (returnContent. contentTYpe == "userSession" ){ 
document. getElementById( 'sessionId'). value = returnContent. sessionId; 
证 (returnContent. contentTYpe == "userOnLineList") { 
Var users = returnContent. users; 
for (var i=0; i<users.length; i++) { 
userList += '<1i>< span class ="'+users[i]. headImage + '"></span>' 
+ users[i].userName + ‘</1i>'; 
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} 
document. getElementById( ‘userOnLine'). innerHTML = userList; 
document. getElementById( 'userList').className = "none — img none"; 


} 
if (returnContent. content' == "newUserOnLine"){ 
Var userName = returnContent. userName; 
NotificationHandler. showNotification(userName, "上 线 "); 
. 


if (returnContent. contentType == "userOffLine"){ 
Var userName = returnContent.userName; 
NotificationHandler. showNotification(userName, "离线 "); 
由 
if(returnContent. contentType chatMessages"){ 
Var messages = returnContent. messages; 
//alert(messages. length); 
Var userName = document. getElementById("userNameTxt"). innerHTML; 
for(var i= messages. length—1; i>=0;1i--){ 
if(messages[i].user. userName == userName){ 
messageList += '< 1i>< span class = "chatcontent mychatcontent">' 
+ messages[i].chatMessage + '</span>< span class ="" 
+ messages[i].user. headImage + '"></span></1i>'; 





Jelse{ 
messageList += '< 1i>< span class = "'+messages[i].user. headImage 
+ '"></span>< span class = "chatcontent">' 
+ messages[ i].chatMessage + ‘</span></1i>'; 


} 
document. getElementById( 'chatList'). innerHTML = messageList; 


}; 


最 后 ,实现 网 络 聊 天 室 的 主 界面 ,如 图 10-8 所 示 ,页 面 chatRoom. jsp 的 代码 如 下 所 示 。 
【案例 10-14】 chatRoom. jsp 


<% @ page contentTYpe = "text/html;charset =utf - 8" %> 
<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf — 8"> 
< title> HTML5 WebSocket 测试 </title> 
< link href = "css/main.css" rel = "stylesheet" type = "text/css"> 
</head> 
<body> 
<div class = "container"> 
<1—— header——> 
<div class= "header"> 
<div id= "configure"> 
服务 器 地 址 : < input type = "text" jd = "serverAdress" 
value = "<$% = request. getServerName() %>"/> 
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服务 器 端口 : < input type = "text" id = "serverPort" value = "8080"/> 
昵称: < inputtype = "text" id = "userName"/> 
< input type = "button" onclick= "loginUser()"/> 
</div> 
<div id= "chatPart" class = "none"> 
服务 器 地 址 : < span id = "serverAdressTxt"></span> 
服务 器 端口 : < span id = "serverPortTxt"></span> 
上 昵称: < span id = "userNameTxt"></span> 
</div> 
</div> 
<div class = "banner"></div> 
< == Content==> 
<div class= "content"> 
Re 
<div class= "left"> 
<div id= "connectStatus"> 
<h3 class = "gray"> 用 户 状态 </h3> 
<div id= "connectDiv" class = "offline ~ img"></div> 
</div> 
<div id= "messages" class = "none"> 
<h3 class = "gray"> 聊 天 记录 </h3> 
< input type = "hidden" id= "sessionId"/> 
< textarea rows = "3" cols = "30" id = "chatMessage"></textarea> 
< input type = "button" onclick = "sendMessage( ) "> 
<ul id= "chatList"> 
<1i>< span class= "headl"></span> 
< span class = "chatcontent"> 欢 迎 进入 聊天 室 </span></1i> 
</ul> 
</div> 
</div> 
二 
< div class = "right"> 
< h3 class = "box"> 在 线 用 户 </h3 > 
<div id= "userList" class = "none ~ img"></div> 
<ul id= "userOnLine"> 
</ul> 
</div> 
</div> 
</div> 
< script type = "text/javascript" src= "js/notification. js"></script > 
< script type = "text/javascript" src= "js/clinetWebSocket. js"></script> 
</body> 
</html > 





10.3.3 基于 Node.js 的 网 络 聊 天 室 


下 述 代码 对 网 络 聊天 室 进行 改版 .使 用 Node. js 作为 服务 端 技术 ,express 框架 作为 服 
务 端 路 由 ,通过 node-uuid 框架 来 生成 客户 端的 唯一 标识 connectionId ,方便 服务 端 对 客户 


端的 识别 。 
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首先 ,创建 一 个 Web 项 目 , 并 使 用 npm init 命令 创建 package. json 文件 ,代码 如 下 
所 示 。 
【案例 10-15】 package. json 


{ 


"name" :"chatroom", 





Sarsion™ L020 


"description": 回 
"main" :" index. js", 案例 视频 讲解 
"scripts":{ 
"test":"echo \"Error: no test specified\" && exit 1" 
}, 
"author" :"jCuckoo", 
"license" :"ISC", 
"devDependencies":{ 
"express" :"^4.15.3"， 
"node- unid" :"^1.4.8"， 
0 


接 下 来 ,创建 一 个 服务 端 脚本 index. js, 使 用 ws 框架 来 创建 服务 端的 WebSocket, 用 于 
响应 客户 端的 请 求 ,代码 如 下 所 示 。 
【案例 10-16】 index.js 


Var express = require( 'express'); 
const http = require( 'http'); 
const url = require( 'url'); 
const WebSocket = require( 'ws'); 
const uuid = require( 'node — uuid'); 
var app = express(); 
// 下 面 会 修改 临时 文件 的 存储 位 置 , 如果 没有 则 默认 存储 别 的 地 方 , 这 里 不 再 详细 描述 
app. use( express. static( ‘public')); 
// 设 置 http 服务 监听 的 端口 号 
app. set( 'port', process. env. PORT| |3000); 
app. listen(app. get( 'port'), function(){ 
console. log( "Express started on http://localhost:" + app. get( 'port') 
+ '; press Ctrl ~ C to terminate. '); 
1D); 
// 浏 览 器 访问 localhost 会 输出 一 个 html 文件 
app. get( '/', function(req, res){ 
res. typel( 'text/htm]l '); 
res. sendfile( '. /index. html'); 
D); 
const server = http. createServer(app); 
const wss = new WebSocket. Server({server}); 
server. listen(8080, function listening(){ 
console. log( 'Listening on %d', server.address().port); 
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Ds; 


var connections = []; 
var userList =[]; 
var chatList =[]; 
Var headImages = ["head1", "head2", "head3", "head4", "head5" ]; 
wss. on( 'connection', function connection(ws, req){ 
Var currentUser; 
var client uuid= uuid.v4(); 
connections. push({"id":client uuid, "ws" :ws}); 
console. log( '&&&&&client[ % s] 连 接 成 功 ! &&&&&&&', client_uuid); 
// 用 户 连接 时 ,获得 在 线 用 户 列表 
Ws. send(getUsersOnLine( ) ) 7 
Ws. on( 'message', function incoming(message){ 
//var json= eval('('+message+ ')'); 
let json = JSON. parse(message); 
// 当 用 户 发 出 登录 请 求 时 
if(json.op== "login"){ 
let userName = json. userName; 
let loginTime = new Date( ); 
let index = Math. ceil(Math. random( ) * (headImages, length) ) ; 
// 封 装 登录 用 户 信 息 ,以 便 保存 到 WebSocket 中 
currentUser = { 'userName':userName, 'loginTime': loginTime, 
"headImage':headImages[ index]}; 
userList.push({"id" :client_uuid, "user":currentUser}); 
console.1log(' 打 打 打 提亲 提 间 提 client[%s] 登 录 成 功 间 提 提 提亲 提 ',currentUser); 
broadCast (getUsersOnLine( )); 
broadCastNotification(getNewUser(currentUser. userName), ws); 
// 发 送 用 户 登 录 会 话 
ws. send(getUserWithConnetionInfo(client_uuid)); 
}else if(json.op= "chat"){ 
let connectionId = json. connectionId; 
let chatMessage = json. chatMessage; 
let time = json. time; 
let user = getUserFromUserList(connectionId); 
let msg = {'user':user, 'chatMessage':chatMessage, 'time':time}; 
chatList. push({"id":client uuid, "msg" :msg} ) 
broadCast (getAllMessage()); 


1); 
ws. on( 'close', function( ){ 
for(var i in connections){ 


if(connections[i].ws== =ws){ 
connections. pop(ws); 
break; 

} 


} 

if(currentUser!= null&&currentUser. userName!= null){ 
userList. pop(currentUser); 
broadCastNotification(getUserOffLine(currentUser. userName), ws); 
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broadCast (getUsersOnLine( )); 
} 
ws. close( ); 
]) 
D); 
function onLineList(message, ws){ 
WSs. Send( message); 
} 
// 向 客户 端 以 数组 形式 发 送 在 线 用 户 列表 
function broadCast (message){ 
//console. log(connections. length); 
for(var i in connections){ 
try{ 
if(connections[il].ws. readyState == = WebSocket. OPEN){ 
// 参 数 为 字符 串 类 型 
connections[i].ws. send(message); 
} 
} catch(e){ 
console. log(e); 
connections. pop(connections[i]); 


有 
上 
// 广 播 通知 信息 
function broadCastNotification(message, ws){ 
//console. log(connections. length); 
for(var i in connections){ 
try{ 
if(connections[i].ws.readyState == = WebSocket. OPEN 
&&connections[i].ws!= ws){ 
// 参 数 为 字符 串 类 型 
connections[i].ws. send(message); 
} 
} catch(e){ 
console. log(e); 
connections. pop(connections[i]); 


} 
有 


// 返 回 在 线 用 户 列表 ,并 以 字符 串 形式 返回 
function getUsersOnLine(){ 
let jsonObject = {}; 
jsonObject. users = userList; 
jsonObject. contentType = ‘userOnLineList'; 
return JSON. stringify(jsonObject); 
} 
// 获 得 新 上 线 用 户 信息 ,并 以 字符 串 形式 返回 
function getNewUser(userName){ 
let jsonObject = {}; 
jsonObject. userName = userName; 
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jsonObject. contentType = 'newUserOnLine '; 
return JSON. stringify(jsonObject); 

} 

// 封 装 离线 用 户 

function getUserOffLine(userName){ 
let jsonObject = {}; 
jsonObject. userName = userName; 
jsonObject. contentType = 'userOffLine'7 
return JSON. stringify(jsonObject); 

} 

// 返 回 指定 的 客户 端 信息 

function getUserWithConnetionInfo(connectionId){ 
let jsonObject = {}; 
jsonObject. connectionId = connectionId; 
jsonObject. contentType = "userSession"; 
return JSON. stringify( jsonObject); 

上 

// 根 据 connectionId 查找 在 线 用 户 列表 

function getUserFromUserList(connectionId){ 
for(var i in userList){ 

if(userList[i]. id== connectionId){ 
return userList[i].user; 


} 
} 
return null; 
// 返 回 所 有 的 聊天 信息 


function getAllMessage( ){ 
let jsonObject = {}; 
jsonObject. messages = chatList; 
jsonObject. contentType = 'chatMessages'; 
return JSON. stringify(jsonObject); 


当 用 户 登录 或 用 户 发 送 聊 天 内 容 时 , 均 通 过 WebSocket 客户 端 向 服务 端 发 送 数据 ,并 
将 connectionId 一 并 发 送 给 服务 端 ,服务 端 根 据 connectionId 来 区 分 客户 端 。 当 服务 端的 
数据 发 生变 化 时 ,将 数据 发 送 到 客户 端 ,由 客户 端 WebSocket 接收 数据 并 通过 DOM 操作 
实现 页 面 的 更 新 。WebSocket 客户 端 代码 如 下 所 示 。 

【案例 10-17】 clientWebSocket. js 


Var serverAddress = document. getElementById("serverAdress").value; 
Var serverPort = document. getElementById("serverPort"). value; 
//var url = 'ws://localhost:8080/ChatRoom/chatRoomWebsocket'; 
var url = "ws://" + serverAddress + ":" + serverPort 

+ "/ChatRoom modify/chatRoomWebsocket"; 
Var webSocket = new WebSocket (url); 
Var userName; 


// 用 户 注册 
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function loginUser(){ 
userName = document. getElementById("userName").value; 
var user = new User("login", userName); 
// 界 面 模块 切换 
document. getElementById("chatPart"). style. display = "block"; 
document. getElementById("configure"). style. display = "none"; 
document. getElementById("messages"). style. display = "block"; 
document. getElementById("connectStatus"). style. display = "none"; 
document. getElementById("serverAdressTxt"). innerHTML = serverAddress; 
document. getElementById("serverPortTxt"). innerHTML = serverPort; 
document. getElementById("userNameTxt"). innerHTML = userName; 
// 发 送 注册 信息 
webSocket. send(JSON. stringify(user)); 

} 

// 发 送 聊 天 信息 

function sendMessage(){ 
Var chatMessage = document. getElementById("chatMessage" ); 
Var connectionId = document. getElementById("connectionId"). value; 
Var message = new Message( 'chat', connectionId, chatMessage. value, getTime( ) ); 
chatMessage. value = "'; 
webSocket. send(JSON,. stringify(message) ) ; 


function User(op, userName){ 
this. op = op; 
this. userName = userName; 
function Message( op, connectionId, chatMessage, time){ 
this. op = op; 
this. connectionId = connectionId; 
this. chatMessage = chatMessage; 
this. time = time; 
} 


function getTime( ){ 
Var now = new Date( ); 
return now. getFullYear() + "/" + (now. getMonth() +1)+"/"+now.getDate() 
+" "+now.getHours() +":"+now.getMinutes() 1+":"+now.getSeconds(); 
} 
webSocket. onerror = function(event){ 
alert(event. data); 
}; 
// 与 WebSocket 建立 连接 
webSocket. onopen = function(event){ 
document. getElementById( 'connectDiv') .className = "online — img"; 
}; 
// 处 理 服务 器 返回 的 信息 
webSocket. onmessage = function(event){ 
var userList = ""; 
var messageList = ""; 
var returnContent = eval("(" + event.data+")"); 
console. log(returnContent); 
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if(returnContent. content:' == "userSession"){ 
document. getElementById( 'connectionId').value 
= returnContent. connectionId; 
b 
if (returnContent. content' == "userOnLineList"){ 
Var users = returnContent. users; 
for (var i=0; i<users.length; i++){ 
userList += '<1i>< span class = "'+users[i].user.headImage + '"></span>' 
+users[i].user. userName + '</1i>'7 
1 
document. getElementById( 'userOnLine'). innerHTML = userList; 
document. getElementById( 'userList').className = "none — img none"; 
} 
证 (returnContent. contentType == "newUserOnLine"){ 
var userName = returnContent. userName; 
NotificationHandler. showNotification(userName, "上 线 "); 
} 
if (returnContent. contentType == "userOffLine"){ 
Var userName = returnContent. userName; 
NotificationHandler. showNotification(userName, "离线 "); 
} 
if(returnContent,. contentType == "chatMessages"){ 
Var messages = returnContent. messages; 
var userName = document. getElementById("userNameTxt"). innerHTML; 
for(var i= messages. length—1; i>=0; i--){ 
if(messages[i].msg. user. userName == userName){ 
messageList += '< 1i>< span class = "chatcontent mychatcontent">' 
+messages[i].msg.chatMessage + '</span>< span class="" 
+ messages[i].msg.user. headImage + "></span></1i>'; 
Jelse{ 
messageList += '< 1i>< span class="" 
+ messages[i].msg. user. headImage 
+ '"></span>< span class = "chatcontent">' 
+ messages[i].msg. chatMessage + '</span></1i>'; 


} 
document. getElementById( 'chatList'). innerHTML = messageList; 


}; 


接 下 来 ,实现 网 络 聊天 室 的 主 界面 index. html, 代 码 如 下 所 示 。 
【案例 10-18】 index. html 


<!DOCTYPE html > 


< html > 

< head > 
<meta charset = "utf 一 8"> 
<title> 聊 天 室 </title> 


< link href = "css/main. css" rel = "stylesheet" type = "text/css"> 
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</head> 
<body> 
<div class = "container"> 
<! -~ header 一 一 > 
<div class = "header"> 
<div id= "configure"> 
服务 器 地 址 : < input type = "text" id = "serverAdress" value = "localhost"/> 
服务 器 端口 : < input type = "text" id = "serverPort" value = "8080"/> 
昵称: < input type = "text" id = "userName" /> 
< input type = "button" class = "login - button" onclick = "loginUser()"/> 
</div> 
<div id= "chatPart" class = "none"> 
服务 器 地 址 : < span id = "serverAdressTxt"></span> 
服务 器 端口 : < span id = "serverPortTxt"></span> 
上 昵称 : < span id = "userNameTxt"></span> 


</div> 
</div> 
<div class = "banner"></div> 
<! -- content 一 -> 


< div class = "content"> 
二 一 一- 到 
<div class = "left"> 
< div id= "connectStatus"> 
<h3 class = "gray"> 用 户 状 态 </h3 > 
< div id= "connectDiv" class = "offline- img"></div> 
</div> 
<div id= "messages" class= "none"> 
<h3 class = "gray"> 聊 天 记录 </h3 > 
< input type = "hidden" id = "connectionId" /> 
< textarea rows = "3" cols = "30" id = "chatMessage"></textarea> 
< input type = "button" onclick = "sendMessage( ) "> 
<ul id= "chatList"> 
<1i>< span class = "headl"></span> 
< span class = "chatcontent"> 欢 迎 使 用 聊天 室 </span ></1i> 
</ul> 
</div> 
</div> 
0 
<div class = "right"> 
< h3 class = "box"> 在 线 用 户 </h3 > 
<div id= "userList" class = "none— img"></div> 
<ul id= "userOnLine"></ul> 
</div> 
</div> 
</div> 
< script type = "text/javascript" src= "js/notification. js"></script> 
< script type = "text/javascript" src= "js/clinetWebSocket. js"></script> 
</body> 
</html > 
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最 后 ,在 控制 台中 使 用 node index. js 命令 来 启动 Node. js 服务 器 ,在 浏览 器 地 址 栏 中 
输入 http://localhost:3000/ 进 行 测试 即 可 。 


本 章 总 结 


。 Server-Sent Events 是 一 种 单 向 消息 传递 基于 HTTP 协议 的 服务 器 推送 技术 。 

。 WebSocket 是 一 种 基于 TCP 协议 的 服务 端 和 客户 端 双向 通信 技术 ,服务 端 能 够 主 
动向 客户 端 推送 信息 ,同时 客户 端 也 能 够 向 服务 端 发 送信 息 。 

。 在 WebSocket API 中 ,提供 了 客户 端 和 服务 端 进行 双向 通信 的 公共 接口 ,其 中 
readyState 属性 (只 读 ) 表 示 连 接 状 态 , 取 值 范围 是 CONNECTING、 OPEN、 
CLOSING 和 CLOSED 四 个 状态 。 

。 WebSocket 接口 提供 了 一 套 完整 的 事件 模型 ,用 于 捕获 浏览 器 与 服务 器 交互 过 程 的 
各 种 状态 日 如 onopen ,onmessage ,onclose 和 onerror 等 。 

。 使 用 Notification 技术 所 产生 的 消息 不 依附 于 某 个 页 面 ,而 是 依附 于 整个 浏览 器 。 

。 在 Notification 接口 中 ,提供 了 一 系列 的 属性 和 方法 ,用 于 判断 浏览 器 是 否 支 持 
Notification 通知 ,是否 开启 通知 权限 .设置 提示 内 容 . 显 示 提 示 消 息 . 关 闭 通 知 等 。 


本 章 练习 
1. 当 客户 端 与 服务 端 需要 双向 传递 信息 时 可 以 通过 技术 来 实现 ,该 技术 是 一 
种 基于 协议 的 服务 端 和 客户 端 双向 连接 技术 ,服务 端 可 以 主动 向 客户 端 推送 信息 ， 


客户 端 也 可 以 向 服务 端 主动 推送 信息 。 

2. WebSocket 接口 中 的 readyState 属性 是 一 个 只 读 属 性 ,用 于 表示 连接 状态 ,其 取 值 
可 以 为 8 或 。 

3. 在 WebSocket 接口 中 ， 事件 将 在 成 功 与 服务 器 建立 连接 时 和 触发， 
事件 将 在 从 服务 器 接收 到 数据 时 触发 。 

4. 特性 用 于 配置 和 显示 桌面 通知 ,为 用 户 提 供 更 好 的 体验 。 

5. 在 Notification 接口 中 ， 方法 用 于 请 求 用 户 允 许 显示 通知 。 

6. 在 创建 Notification 对 象 时 ,需要 为 其 构造 方法 提供 两 个 参数 ,其 中 参数 为 
通知 的 标题 ， 参数 是 NotificationOptions 类 型 ,用 于 设置 为 通知 提供 基本 信息 。 

7. 请 简单 描述 Server-Sent Events 和 WebSocket 技术 的 区 别 。 
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AS 本 章 目标 


。 了 解 离线 应 用 的 基本 原理 。 

。 掌握 manifest 配置 文件 。 

。 熟练 使 用 applicationCache 对 象 。 

。 了 解 Web 离线 应 用 的 交互 过 程 。 

。 了 解 XMLHttpRequest Level 1 与 服务 端 异步 交互 过 程 。 
。 熟练 使 用 XMLHttpRequest Level 2 向 服务 器 提交 数据 。 


11.1 离线 应 用 


目前 Web 应 用 越 来 越 广泛 ,很 多 领域 都 在 使 用 Web 应 用 程序 ,但 Web 应 用 程序 存在 
一 个 致命 的 弱点 : 当 用 户 断 开 Internet 连接 时 就 无 法 继续 使 用 互联 网 中 的 Web 应 用 。 
HTML 5 规范 中 新 增 了 一 个 离线 API, 通 过 本 地 缓存 机 制 来 解决 Web 应 用 程序 的 离线 访问 
问题 ,为 离线 Web 应 用 程序 提供 了 很 好 的 支持 。 

离线 Web 应 用 程序 是 指 当 客户 端 与 Web 应 用 程序 的 服务 端 断 开 连接 时 ,也 能 在 客户 
端正 常 使 用 该 应 用 程序 ,继续 完成 相应 的 操作 。 为 了 让 Web 应 用 程序 在 离线 状态 下 也 能 正 
常 工作 ,需要 将 Web 应 用 程序 所 有 的 静态 资源 文件 (如 HTML、CSS、JavaScript 等 文件 ) 都 
加 载 到 本 地 缓存 中 , 当 客 户 端 断 开 Internet 连接 时 ,使 用 本 地 缓存 中 的 资源 文件 来 正常 运行 
Web 应 用 程序 。 离 线 存储 具有 以 下 优点 。 

。 离线 浏览 : 用 户 能 够 在 离线 状态 下 继续 浏览 网 站 的 内 容 ; 

。 更 快 的 速度 : 由 于 资源 文件 被 存储 在 本 地 ,所 以 加 载 速度 会 更 快 ; 

。 减轻 服务 器 的 负载 : 浏览 器 仅 需 下 载 服务 端 所 更 新 的 资源 ,有 效 地 减轻 了 服务 器 的 

负载 压力 。 


11.1.1 manifest 文件 
Web 应 用 程序 的 本 地 缓存 是 通过 manifest 文件 来 管理 的 ,manifest 文件 是 一 个 简单 文 
本 文件 ,文本 内 容 是 以 清单 列表 形式 来 说 明 需 要 缓存 或 不 需要 缓存 的 资源 文件 的 URL 路 


径 和 文件 名 称 。 在 Web 应 用 中 允许 为 每 个 页 面 单独 设置 一 个 manifest 文件 ,也 可 以 对 整个 
Web 应 用 程序 指定 一 个 manifest 文件 。 
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在 manifest 文件 中 ,第 一 行 必须 是 CACHE MANIFEST, 用 于 说 明 当 前 文件 是 一 个 本 
地 缓存 资源 的 配置 文件 。 文 件 中 的 注释 说 明 行 需要 以 井 号 (# ) 开 头 ,表示 当前 行 用 于 提供 
说 明 ,在 文本 解析 时 将 忽略 该 行 。 

在 manifest 文件 中 配置 资源 时 ,可 以 将 资源 文件 分 为 CACHE、NETWORK 和 
FALLBACK 三 种 类 型 ,具体 如 下 。 
CACHE 类 型 : 是 指 需要 被 缓存 在 本 地 的 资源 文件 。 
NETWORK 类 型 : 是 指 不 需要 被 缓存 的 资源 文件 ,这 些 资 源 文件 只 有 在 客户 端 和 
服务 端 连接 情况 下 才能 进行 访问 。 在 NETWORK 选项 中 ,如 果 没 有 设置 的 文件 都 
不 需要 缓存 时 ,可 以 使 用 通配符 星 号 (* ) 进 行 配置 。 
FALLBACK 类 型 : 在 同一 行 中 指定 在 线 时 所 访问 的 资源 文件 和 离线 时 所 访问 的 资 
源 文件 。 第 一 个 资源 文件 作为 在 线 访问 时 所 使 用 的 资源 文件 ,第 二 个 资源 文件 为 离 
线 访 问 时 所 使 用 的 备用 资源 文件 。 
下 述 代码 演示 了 使 用 manifest 文件 来 配置 本 地 缓存 机 制 。 
【案例 11-1】 index. manifest 


CACHE MANIFEST 
# 建 议 使 用 Firefox、Chrome 浏览 器 
#version 1.0 


#author by yangfei 


#CRCHE 列表 是 需要 缓存 的 资源 文件 
CACHE: 

index. html 

css/index. css 

images/chuqiao01. jpg 
images/yuwenyue01. jpg 

js/jquery- 3.2.1.js 


井 NETWORK 列表 是 不 需要 缓存 的 资源 文件 ,每 次 访问 时 都 需要 从 服务 端 获取 
NETWORK : 
深 


并 FALLBACK 列表 中 提供 在 线 访问 资源 文件 以 及 离线 时 的 备用 资源 文件 
FALLBACK: 
images/yuanchun01. jpg images/xiaoce01. jpg 


上 述 代码 中 ,在 第 一 行 中 使 用 CACHE MANIFEST 声明 当前 文件 是 一 个 本 地 缓存 的 
配置 文件 。 在 index. manifest 文件 中 ,所 有 以 井 号 (#) 开 头 的 行 都 是 注释 说 明 行 。CACHE 
项 用 于 说 明 需 要 缓存 的 资源 文件 ; NETWORK 项 使 用 通配符 “x” 进行 配置 ,表示 除了 
CACHE 配置 之 外 的 其 他 资源 文件 都 需要 从 服务 端 获 取 ; 在 FALLBACK 项 中 指定 在 线 访 
问 时 所 使 用 的 资源 文件 和 离线 访问 时 备用 的 资源 文件 。 

在 html 元 素 中 提供 了 manifest 属性 ,用 于 设置 当前 页 面 使 用 的 缓存 机 制 , 代 码 如 下 
所 示 。 
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【示例 】 


<html manifest = "index. manifest"> 


11.1.2 applicationCache 对 象 


applicationCache 对 象 代 表 本 地 缓存 , 当 浏 览 器 的 本 地 缓存 更 新 并 载 人 新 的 资源 文件 
时 ,将 会 触发 applicationCache 对 象 的 onupdateready 事件 来 通知 页 面 本 地 缓存 已 经 更 新 ， 
在 页 面 中 也 可 以 通过 手动 调用 applicationCache. update() 方 法 来 触发 onupdateready 事件 。 

HTML 5 规范 中 提供 了 applicationCache 接口 ,该 接口 的 语法 格式 如 下 。 

【语法 】 


interface ApplicationCache: EventTarget{ 
//update status 
const unsigned short UNCACHED = 0; 
const unsigned short IDLE=1; 
const unsigned short CHECKING = 2; 
const unsigned short DOWNLOADING = 3; 
const unsigned short UPDATEREADY = 4; 
const unsigned short OBSOLETE = 5; 
readonly attribute unsigned short status; 
//updates 
void update( ); 
void swapCache( ); 
//events 
attribute Function onchecking; 
attribute Function onerror; 
attribute Function onnoupdate; 
attribute Function ondownloading; 
attribute Function onprogress; 
attribute Function onupdateready; 
attribute Function oncached; 
attribute Function onobsolete; 

}; 


其 中 ， 

。 status 属性 (只 读 ) 用 于 返回 applicationCache 对 象 的 当前 状态 , 取 值 范围 是 

UNCACHED( 未 缓存 ) IDLE( 空 闸 ) .CHECKING( 检 查 )\DOWNLOADING (下载 

中 )、UPDATEREADY( 更 新 就 绪 ) 和 OBSOLETE( 废 弃 ) 六 种 状态 ; 

update() 方 法 用 于 触发 updateready 事件 ,并 对 Web 应 用 的 缓存 进行 更 新 , 当 应 用 

程序 没有 更 新 时 将 会 抛 出 状态 无 效 异 常 ; 

。 swapCache() 方 法 在 Web 应 用 存在 更 新 时 将 切换 到 最 新 的 应 用 程序 缓存 , 当 Web 
应 用 没有 更 新 时 将 抛 出 无 效 异常 。swapCache() 方 法 不 会 对 已 经 加 载 的 资源 进行 
重 载 ,如 图 像 不 会 被 重新 加 载 . 样 式 表 和 脚本 不 会 被 重新 解析 或 重新 评估 ,此 时 需要 
借助 location. reload() 等 JavaScript 脚本 对 页 面 进行 重 载 。 
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除 此 之 外 ,applicationCache 接口 还 提供 了 一 系列 的 事件 处 理 机 制 , 见 表 11-1。 
表 11-1 applicationCache 事件 处 理 方法 





























事 性 描 述 
onchecking 当 客 户 端 检 查 Web 应 用 更 新 时 触发 该 事件 
onerror 当 发 送 错误 时 触发 该 事件 
onnoupdate 当 Web 应 用 没有 更 新 时 触发 该 事件 
ondownloading 已 经 找到 了 一 个 更 新 并 正在 获取 中 ,或 者 正在 下 载 清单 中 列 出 的 资源 
onprogress 正在 下 载 清 单 中 列 出 的 资源 
onupdateready 清单 中 列 出 的 资源 已 被 重新 下 载 ,脚本 可 以 使 用 swapCache() 切 换 到 新 的 缓存 
oncached 清单 中 列 出 的 资源 已 被 下 载 , 应 用 程序 现在 已 被 缓存 
onobsolete HTTP 请 求 返回 404 或 410 状态 码 时 触发 该 事件 ,应 用 程序 缓存 将 被 删除 


下 述 代码 演示 了 使 用 onupdateready 事件 处 理 方法 对 资源 进行 重 载 。 
【示例 】 onupdateready 事件 


applicationCache. onupdateready = function( ){ 
if(confirm(" 本 地 缓存 已 被 更 新 ,需要 刷新 页 面 来 获取 应 用 程序 最 新 版 本 ")){ 
// 手 动 更 新 本 地 缓存 ,只 能 在 onupdateready 事件 触发 时 调用 
applicationCache. swapCache() 7 
location. reload( ); 


11.1.3 Browser State 


HTML 5 规范 提供 了 NavigatorOnLine 接口 .用 于 检测 浏览 器 的 联网 状态 ， 
NavigatorOnLine 接口 的 语法 格式 如 下 。 

【语法 】 

interface NavigatorOnLine{ 


readonly attribute boolean onLine; 
}; 


其 中 : onLine 属性 (只 读 ) 用 于 返回 浏览 器 的 当前 联网 状态 。 

通过 navigator. onLine 属性 来 检测 浏览 器 是 否 处 于 联网 状态 , 当 浏 览 器 处 于 联网 状态 
时 ,onLine 属性 为 true, 和 否则 onLine 属性 为 false。 

下 述 代码 演示 了 检测 浏览 器 是 否 处 于 联网 状态 。 

【示例 】 检测 联网 状态 


if(navigator. onLine){ 
alert(" 用 户 处 于 在 线 状态 !"); 
Jelse{ 
alert(" 用 户 处 于 离线 状态 !"); 
} 
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通过 window 对 象 的 online 和 offline 事件 来 监听 浏览 器 联网 状态 的 变化 。 当 浏览 器 从 
联网 状态 变 成 离线 状态 时 ,navigator. onLine 属性 为 false, 同 时 会 触发 offline 事件 ; 当 浏 览 
器 从 离线 状态 变 成 联网 状态 时 ,navigator. onLine 属性 为 true, 同 时 会 触发 online 事件 。 

下 述 代码 演示 了 window 对 象 的 online 和 offline 事件 绑 定 。 

【示例 】 online 和 offline 事件 的 绑 定 


// 当 浏览 器 状态 变 成 在 线 状态 时 ,会 触发 online 事件 

window. addEventListener( "online", function( ){ 
alert("online 事件 被 激活 ,您 已 变 成 在 线 状态 !") 

},true); 

// 当 浏览 器 状态 变 成 离线 状态 时 ,会 触发 offline 事件 


window. addEventListener( "offline", function(){ 


alert("offline 事件 被 激活 ,您 已 变 成 离线 状态 !") 


},true); 


11.1.4 Web 应 用 的 交互 过 程 
当 用 户 首次 向 Web 应 用 程序 发 出 请 求 时 ,服务 端 对 用 户 的 请 求 进行 响应 ,并 将 用 户 所 


请 求 的 资源 发 送 到 客户 端 。 现 有 一 个 offLineDemo 项 目 , 其 中 包含 images、css 和 js 三 个 子 
目录 ,在 项 目的 根 目 录 下 有 一 个 index. html 和 index. manifest 文件 ,项 目 结构 如 图 11-1 
所 示 。 
4 SofflineDemo 
2m css 
加 indexcss 
4 images 


总 chuqiao0ljpg 
总 chuqiao02jpg 
六 xiaoce0ljpg 
总 yuanchun0ljpg 
庄 yuwenyue0ljpg 
ajs 
四 jquery-3.2.1js 
回 indexhtml 


国 indexmanifest 


图 11-1 offLineDemo 项 目 目录 结构 


其 中 ,index. manifest 文件 与 11. 1. 1 节 中 的 index. manifest 文件 完全 相同 ,此 处 不 再 
比 述 。 在 index. html 页 面 中 对 index. manifest 文件 进行 引用 ,并 使 用 JavaScript 脚本 实现 
在 线 和 离线 两 种 状态 的 检测 与 处 理 ,代码 如 下 所 示 。 

【案例 11-2】 index. html 


<!DOCTYPE html > 
< html manifest = "index. manifest"> 





<head> 总 
<meta charset = "utf - 8"/> 回 ; 
<title> 离 线 应 用 示例 </title> 案例 视频 讲解 


<1link rel = "stylesheet" href = "css/index.css"/> 
< script type = "text/javascript" src= "js/jquery- 3.2.1. js" ></script> 
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< script type = "text/javascript"> 
// 判 断 浏览 器 的 联网 状态 
if(navigator. onLine){ 
console. log(" 用 户 处 于 在 线 状态 ?"); 
// 强 制 检查 服务 器 上 的 manifest 文件 是 否 有 更 新 
applicationCache. update( ); 
}else{ 
console. log(" 用 户 处 于 离线 状态 !"); 
} 
applicationCache. onupdateready = function(){ 
证 (confirm(" 本 地 缓存 已 被 更 新 ,需要 刷新 页 面 来 获取 应 用 程序 最 新 版 本 ")){ 
// 手 动 更 新 本 地 缓存 , 只 能 在 onupdateready 事件 触发 时 调用 
applicationCache. swapCache( ); 
location. reload( ); 
} 
} 
// 判 断 客户 端的 连接 状态 , 当前 状态 变 成 在 线 状 态 时 , 触发 以 下 事件 
window. addEventListener("online", function(){ 
alert("online 事件 被 激活 ,您 已 变 成 在 线 状 态 !"); 
applicationCache. update( ); 
},true); 
// 判 断 客户 端的 连接 状态 , 当前 状态 变 成 离线 状态 时 , 触发 以 下 事件 
window. addEventListener("offline", function(){ 
alert("offline 事件 被 激活 ,您 已 变 成 离线 状态 !"); 
},true); 
</script> 
</head> 
<body> 
<hl > Web 离线 应 用 </hl ><hr /> 
< img src = "images/yuwenyue01. jpg"/> 
< img src = "images/chuqiao01. jpg"/> 
< img src = "images/yuanchun01. jpg"/> 
</body> 
</html > 


在 Chrome 浏览 器 中 ,通过 网 址 形式 来 浏览 index. html 页 面 时 ,首先 判断 浏览 器 的 联 
网 状态 , 当 浏 览 器 处 于 联网 状态 时 ,在 Console 控制 台中 输出 “用 户 处 于 在 线 状 态 ” 提 示 信 
息 , 页 面 显示 效果 如 图 11-2 所 示 。 

在 Chrome 浏览 器 的 开发 者 工具 (F12) 中 ,查看 Network 选项 卡 ,通过 Disable cache 选 
项 来 切换 本 地 缓存 的 启用 或 禁用 状态 。Disable cache 复 选 框 处 于 被 选中 状态 时 表示 禁用 本 
地 缓存 ,此 时 刷新 页 面 ,在 Network 选项 卡 中 查看 页 面 资源 的 加 载 过 程 ,如 图 11-3 所 示 。 页 
面 中 所 引用 的 index. css、jquery-3. 2. 1.js、yuwenyue01. jpg、chuqiao01. jpg 和 yuanchun01. jpg 静 
态 资源 文件 都 是 从 服务 端 获取 的 。 

接 下 来 ,取消 选中 Disable cache 复 选 框 并 刷新 页 面 ,相当 于 第 二 次 访问 该 页 面 ,此 时 在 
Network 选项 卡 中 查看 页 面 资源 的 加 载 过 程 ,如 图 11-4 所 示 。 由 于 在 index. manifest 文件 
的 CACHE 列表 项 中 配置 了 index. html、index. css、 chuqiao01. jpg、yuwenyue01. jpg 和 
jquery-3. 2. 1.js 五 项 ,所 以 当 第 二 次 访问 该 页 面 时 ,以 上 所 配置 的 资源 文件 不 再 从 服务 端 获 
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取 , 而 是 从 本 地 缓存 中 直接 读 取 。 从 图 11-4 中 可 以 发 现 : Size 栏 中 不 再 显示 文件 的 大 小 ,而 
是 显示 from disk cache, 表 示 从 本 地 缓存 读 取 资 源 文件 。 




















11-2 联网 状态 的 预览 效果 














© Developer Tools - httpy/127, ine.. [S [BT 3 
RD | Hements Console Sources Network Performance Memory Application Securty Audits i 
OlmFlvew 汪 Groupbyframe | 国 Presevelog 团 Disablecache | 国 Offine Online 了 
[Fer 日 Regex @ Hide dat Upls 图 xhR Js css Ime Media Font poc WS Manifest other 

50ms 100ms 150 ms 200 ms 250ms 300 ms 











Name Status Type Initiator A Size Waterfall 
DD index html?_hbt=1502025831845 200 document Other 16KB 
indexcss stylesheet indexhtml? hb 2808 
口 jquen-321js Script indexhtml? hb.. 262 MB 
回 yuwenyue0ljpg jpeg indexhtml? hb. 242 KB 
回 chuqiao0ljpg jpeg indexhtml? hb. 429K8 
回 yuanchun0ljpg jpeg indexhtml? hb. 619 KB 


6 requests 1 393 KB transferred | Finish: 187 ms | DOMContentloaded: 358 ms | Load: 362 ms 














Elements Console Sources Network Periormance Memory Application Security Audits 


二 目 Group by frame | 目 Presevelog 目 Disable cache | 目 Offine Online 
日 pegex ® Hide data URls 图 xhR 1s css Ime Media Font Doc WS Manifest other 
100 ms 150 ms 200 ms 250 ms 300 ms 


Name Initiator Waterfall 20000ms 3004 
口 ndexhtmiz_hbt=150- Other (rom disk cache)| 。 47 ms | mm 

四 indexcss indexhtml? hb.. | (from disk cache) ms 

javey 321js PF I hb. | (fromdiskcache)| 60ms 

加 yuwenyueOljpg indexhtml? hb.. |(iomdiskcache)| 30ms 

回 chuqiao01jpg indexhtml? hb.. | (from disk cache) 62ms 

同 yuanchun0ljpg indexhtml? hb... 619KB 19ms 


6requests | 61.9 KB transfered | Finish: 157 ms | DOMContentLoaded: 259 ms | Load: 281 ms 





图 11-4 再 次 请 求 index. html 页 面 所 加 载 的 资源 文件 


第 11 章 离线 应 用 和 XHR 2 


在 Network 选项 卡 中 ,选中 Offline 复 选 框 来 模拟 离线 操作 ,此 时 触发 offline 事件 并 弹 
出 “offline 事件 被 激活 ,您 已 变 成 离线 状态 1 ”提示 对 话 框 , 单 击 “ 确 定 ” 按 钮 ,并 刷新 页 面 , 在 
Network 选项 卡 中 查看 页 面 资源 的 加 载 过 程 , 如 图 11-5 所 示 。 在 Network 选项 卡 的 时 间 
轴 区 域 ,没有 发 出 任何 网 络 请 求 ,所 有 的 网 络 资源 都 是 从 本 地 缓存 (from disk cache) 中 
加 载 。 








Elements Console Sources ANetwork Performance Memory Application Security Audits 


View 中 站 目 Groupbyframe | 国 Preservelog 轩 Disable cache | 图 Offine Offine vv 
|© Regex @ Hide data Urs 图 | xHr Js css Img Media Font Doc WS Manifest other 
40 ms 60ms 80 ms 100 ms 120ms 140 ms 160 ms 


Status “| Type Initiator Size Time Waterfall = ©20000ms 300.00re 
口 indexhtml?_hbt=150.，200 document Other (from disk cache) 
日 ndexcss 200 stylesheet indexhtml? hb.. (from disk cache) 
Djquery-32.1js 200 script indexhtml? hb- (from disk cache) 
yuwenyue0ljpg 200 jpeg indexhtml? hb (from disk cache) 
回 chuqiao01jpg 200 jpeg indexhtml? hb.. (from disk cache) 
四 yuanchunO1jpg 2 indexhtml? hb... (from disk cache) 58 ms 


6 requests | 0 B transferred | Finish: 130 ms | DOMContentLoaded: 303 ms | Load 305 ms 





图 11-5 模拟 离线 状态 所 发 出 的 请 求 
在 index. manifest 文件 中 ,对 FALLBACK 项 进行 如 下 配置 


井 BRLLBRCK 列表 中 提供 在 线 访问 资源 文件 以 及 离线 时 的 备用 资源 文件 
FALLBACK: 


images/yuanchun01. jpg images/xiaoce01. jpg 


所 以 在 离线 访问 时 ,将 使 用 本 地 缓存 中 的 images/xiaoce01. jpg 图 像 来 替代 服务 端的 
images/yuanchun01. jpg 图 像 ,页 面 最 终 显 示 结 果 如 图 11-6 所 示 。 








SaJLEIGT 和】 

















C |@ 127.0.0.1:8020/ 齐 证 源 码 /chapterll/offLineDemo/indexhtml?_. 人 女 | 得 





Web 离 线 应 用 

















图 11-6 离线 状态 下 的 预览 结果 
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全 > HTML 5 规范 中 所 规定 的 manifest 文件 的 MIME 类 型 是 text/cache-manifest, 在 

"8 出 斌 或 运行 离线 Web 应 用 时 ,需要 对 服务 器 进行 配置 ,使 其 支持 text/cache- 
manifest 的 MIME 类 型 。 本 书 使 用 HBuilder 工具 进行 编码 和 测试 ,该 工具 中 内 置 
服务 器 对 text/cache-manifest 类 型 提供 了 支持 ,无 须 手 动 配置 。 


修改 manifest 文件 中 所 配置 的 缓存 文件 (如 html、essvjs 等 文件 ) 后 ,刷新 页 面 时 浏览 器 
仍然 加 载 本 地 缓存 文件 ,而 不 会 从 服务 端 重新 加 载 被 修改 的 文件 。 只 有 manifest 文件 被 修 
改 时 (包括 注释 部 分 被 修改 ) ,刷新 页 面 时 才 会 从 服务 端 重新 获取 被 修改 过 的 资源 文件 。 

当 manifest 文件 被 修改 后 ,刷新 页 面 时 将 会 触发 applicationCache. onupdateready 事 
件 , 在 该 事件 处 理 方法 中 调用 applicationCache. swapCache() 方 法 来 获取 应 用 程序 的 最 新 
版 本 。 


11.2 XMLHttpRequest 


Ajax(Asynchronous JavaScript and XML) 不 是 一 种 新 的 编程 语言 ,而 是 一 种 基于 
JavaScript 的 异步 交互 技术 ,其 通过 与 服务 端 进行 少量 的 数据 交换 ,实现 页 面 的 局 部 更 新 ， 
无 须 重 载 整个 页 面 。 


11.2.1 XMLHttpRequest Level 1 


Ajax 技术 的 核心 是 XMLHttpRequest 对 象 ,XMLHttpRequest 中 提供 了 客户 端 和 服 
务 端 之 间 的 交互 接口 。 通 过 XMLHttpRequest 对 象 实现 客户 端 与 服务 端的 同步 或 异步 交 
互 ,服务 端 将 返回 一 个 文本 类 型 或 DOM 文档 类 型 的 数据 。XMLHttpRequest 接口 的 语法 
格式 如 下 。 

【语法 】 


interface XMLHttpRequest: XMLHttpRequestEventTarget{ 
//event handler attributes 
attribute Function onreadystatechange; 
//states 
const unsigned short UNSENT = 0; 
const unsigned short OPENED= 1; 
const unsigned short HEADERS RECEIVED = 2; 
const unsigned short LOADING = 3; 
const unsigned short DONE = 4; 
readonly attribute unsigned short readyState; 
//request 
void open( DOMString method, DOMString url1); 
void open( DOMString method, DOMString url, boolean async); 
void open( DOMString method, DOMString url, boolean async, DOMString? user); 
void open(DOMString method, DOMString url, boolean async, DOMString? user, 
DOMString? password); 


}; 
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void setRequestHeader(DOMString header, DOMString value); 
void send() 7 

void send(Document data); 

void send(DOMString? data) 

void abort(); 

//response 

readonly attribute unsigned short status; 
readonly attribute DOMString statusText; 
DOMString getResponseHeader (DOMString header); 
DOMString getAllResponseHeaders(); 

readonly attribute DOMString responseText; 
readonly attribute Document responseXML; 


其 中 : 


readyState 属性 (只 读 ) 用 于 返回 XMLHttpRequest 对 象 的 当前 状态 , 取 值 为 
UNSENT、OPENED、HEADERS_RECEIVED、LOADING 和 DONE 五 种 状态 , 具 
体 见 表 11-2; 

status 属性 (只 读 ) 表 示 由 服务 器 返回 的 HTTP 状态 代码 ,如 200 表示 请 求 成 功 , 而 
404 表示 请 求 的 资源 未 找到 (Not Found); 

statusText 属性 (只 读 ) 用 于 返回 请 求 HTTP 状态 代码 所 对 应 的 属性 名 称 , 当 status 
是 200 时 statusText 为 OK , 当 status 是 404 时 statusText 为 Not Found; 
responseText 属性 用 于 将 服务 端 返回 的 响应 体 (不 包括 响应 头 部 ) 解 析 为 文本 格式 ; 
responseXML 属性 用 于 将 服务 端 返回 的 响应 体 解析 为 XML 格式 ; 
onreadystatechange 属性 用 于 指定 一 个 事件 回调 方法 , 当 readyState 属性 发 生 改变 
时 调用 该 回调 方法 ; 

open() 方 法 用 于 初始 化 HTTP 请 求 参 数 , 如 URL 和 请 求 方 式 , 但 是 并 不 会 发 送 
请 求 ; 

send() 方 法 用 于 发 送 HTTP 请 求 ,使 用 send() 方 法 之 前 需要 通过 open() 方 法 来 初 
始 化 HTTP 请 求 参数 (包括 URL 、 请 求 方式 和 表单 数据 等 ); 

setRequestHeader() 方 法 用 于 对 一 个 打开 但 未 发 送 的 请 求 来 设置 或 添加 一 个 
HTTP 请 求 头 部 ; 

abort() 用 于 取消 当前 响应 并 关闭 连接 ; 
getResponseHeader() 方 法 用 于 返回 一 个 指定 的 HTTP 响应 头 部 ,参数 是 所 要 返回 
的 HTTP 响应 头 部 的 名 称 ; 

getAllResponseHeaders() 方 法 用 于 把 HTTP 响应 头 部 作为 未 解析 的 字符 串 返 回 。 


表 11-2 readyState 的 各 种 状态 














状态 名 称 描 述 
SE is ,XMLHttpRequest 对 象 已 创建 或 已 被 abort() 方 法 
1 OPENED open() 方 法 已 调用 ,但 是 send() 方 法 未 调用 ,请 求 还 没有 被 发 送 
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续 表 
状态 名 称 描 述 
2 HEADERS RECEIVED send() 方 法 已 调用 ,HTTP 请 求 已 发 送 到 Web 服务 器 ,未 接收 
到 响应 
LOADING 所 有 响应 头 部 都 已 经 接收 到 ,响应 体 开始 接收 但 未 完成 
DONE HTTP 响应 已 经 完全 接收 


XMLHttpRequest 对 象 通常 用 于 客户 端 与 服务 端 交换 数据 ,能 够 实现 以 下 几 种 功能 。 
。 在 不 重新 加 载 页 面 的 情况 下 更 新 页 面 ; 

。 在 页 面 加 载 完 毕 后 从 服务 器 请 求 数据 ; 

。 使 用 后 台 线 程 向 服务 器 发 送 数据 。 

下 述 代 码 演示 了 使 用 XMLHttpRequest 实现 与 服务 端的 异步 交互 。 


【案例 11-3】 xhr. html 


<!DOCTYPE html > 
<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "UTF — 8"> 
<title> XMLHttpRequest 异步 请 求 </title> 
< style type = "text/css"> 
table td{padding - left:20px;} 
thead > tr:first ~ child{background ~ color:1ightgray;} 
tbody > tr:nth- child(even) {background - color:lightsalmon;} 
tbody > tr:hover{background - color: lightgreen;} 
</style> 
</head> 
<body> 
< img src = "images/banner. jpg" width= "400px"/> 
<table width= "400px"> 
<thead> 
<tr><th> 用 户 ID</th>< th> 用 户 名 </th>< th> 性 别 </th></tr> 
</thead> 
< tbody id = "userData"></tbody> 
</table> 
< input type = "button" value = "从 服务 端 获 取 数 据 " onclick = "getData()"/> 
<script> 
var xmlHttp = null; 
function getData( ){ 
var url = "data. json" 
if(window. XMLHttpRequest){ //code for all new browsers 
xmlHttp = new XMLHttpRequest(); 
} else if(window. ActiveXObject){ //code for IE5 and IE6 
xmlHttp = new RctiveXObject("Microsoft. XMLHTTP" ); 
} 
if(xmlHttp!= null){ 
xmlHttp. onreadystatechange = updateTable; 
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xmlHttp. open( "GET", url, true); 
xmlHttp. send(nu11); 
} 
} 
function updateTable( ){ 
if(xmlHttp. readyState == 4){ //4 = "loaded" 
if(xmlHttp. status == 200){ //200 = "OK" 
var data = xmlHttp. responseText; 
var json = JSON. parse( data); 
alert("msg:" + json. msg); 
var users = json. users; 
Var result = ""; 
for(var i in users){ 
result += "< tr >"; 
result += "< td>" +users[i].userId+ "</td>"; 
result += "< td>" + users[i]. userName + "</td>"; 
result += "< td>" + users[i]. sex + "</td>"; 
result += "</tr >"; 
} 
document. getElementById( "userData"). innerHTML = result; 


} 
} 
</script > 
</body> 
</html > 


上 述 代 码 中 ,首先 获得 一 个 XMLHttpRequest 类 型 的 xmlHttp 对 象 , 通过 
onreadystatechange 事件 回调 方法 来 处 理 服务 端 返 回 的 响应 数据 。 在 updateTable() 回 调 
方法 中 ,readyState 一 一 4&&status 一 一 200 表示 用 户 请 求 完成 并 且 成 功 返 回响 应 数据 ,此 
时 将 服务 端的 响应 数据 更 新 到 页 面 中 。 

使 用 网 址 来 浏览 xhr. html 页 面 , 当 页 面 加 载 完 毕 时 仅 显示 表 的 头 部 信息 。 单 击 “ 从 服 
务 端 获取 数据 ”按钮 时 ,向 服务 端 发 出 一 个 Ajax 异步 请 求 , 服 务 端 将 data. json 数据 作为 响 
应 数据 返回 ,在 页 面 中 通过 DOM 操作 将 响应 数据 追加 到 表格 中 ,效果 如 图 11-7 所 示 。 





WY OY xMuntttpRequestS> 3 x Nm 
© |© 127.00.1.8020/ 齐 五 天 Ba/chapt， 女 | WW : 








图 11-7 XHR 数据 请 求 
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11.2.2 XMLHttpRequest Level 2 


在 HTML 5 之前, 绝 大 多 数 浏览 器 只 能 通过 XMLHttpRequest 对 象 的 send() 方 法 向 
服务 器 端 发 送 字符 串 或 document 对 象 ; 而 在 HTML 5 规范 中 对 XMLHttpRequest 对 象 的 
send() 方 法 进行 了 改良 ,使 其 能 够 发 送 字符 串 .document 对 象 、 表 单数 据 、Blob 对 象 .文件 以 
及 ArrayBuffer 对 象 。XMLHttpRequest Level 2 的 语法 格式 如 下 。 

【语法 】 


interface XMLHttpRequestEventTarget :EventTarget{ 


}; 


//event handlers 

attribute Function onloadstart; 
attribute Function onprogress; 
attribute Function onabort; 
attribute Function onerror; 
attribute Function onload; 
attribute Function ontimeout; 
attribute Function onloadend; 


interface XMLHttpRequest: XMLHttpRequestEventTarget{ 


//event handler 

attribute Function onreadystatechange; 

//states 

const unsigned short UNSENT = 0; 

const unsigned short OPENED= 1; 

const unsigned short HEADERS RECEIVED = 2; 

const unsigned short LOADING = 3; 

const unsigned short DONE = 4; 

readonly attribute unsigned short readyState; 

//request 

void open( DOMString method, DOMString url, optional boolean async, 
optional DOMString? user, optional DOMString? password); 

void setRequestHeader(DOMString header, DOMString value); 

attribute unsigned long timeout; 

attribute boolean withCredentials; 

readonly attribute XMLHttpRequestUpload upload; 

void send(); 

void send(ArrayBuffer data); 

void send(Blob data); 

void send(Document data); 

void send(DOMString? data); 

void send(FormData data) 

void abort(); 

//response 

readonly attribute unsigned short status; 

readonly attribute DOMString statusText; 

DOMString getResponseHeader (DOMString header); 

DOMString getAllResponseHeaders( ); 

void overrideMimeType( DOMString mime); 
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attribute XMLHttpRequestResponseType responseType; 
readonly attribute any response; 
readonly attribute DOMString responseText; 
readonly attribute Document responseXML; 

}; 


其 中 ， 
。 readyState 属性 (只 读 ) 用 于 返回 XMLHttpRequest 对 象 的 当前 状态 , 取 值 为 
UNSENT OPENED .HEADERS_RECEIVED.LOADING 和 DONE 五 种 状态 ; 
。 XMLHttpRequest 接口 中 提供 了 onreadystatechange、onloadstart、onprogress、 
onabort ,onerror\onload .ontimeout 和 onloadend 等 事件 处 理 机 制 ; 
send() 方 法 用 于 发 送 HTTP 请 求 . 可 携带 的 数据 类 型 为 ArrayBuffer、Blob、 
Document ,DOMString 和 FormData 等 ; 
。 responseType 属性 用 于 设置 服务 端的 响应 类 型 ,可 以 是 空 字符 串 ( 默 认 值 )、 
arraybuffer blob document json 和 text 等 类 型 ; 
。 upload 属性 用 于 返回 一 个 XMLHttpRequestUpload 对 象 ,其 中 包含 文件 上 传 过 程 
中 的 进度 信息 ; 
。 response 属性 用 于 返回 服务 端的 响应 数据 。 
使 用 XMLHttpRequest Level 2 向 服务 端 发 送 数 据 时 ,可 以 使 用 FormData 对 象 来 封装 
表单 中 的 数据 ,也 可 以 使 用 append() 方 法 向 FormData 对 象 中 追加 数据 。 
【示例 】 FormData 封装 数据 


// 封 装 表单 中 的 数据 
var formData = new FormData( document. getElementById( 'uploadForm') ); 
// 向 FormData 中 追加 文本 数据 
formData. append("sex"，" 男 "); 
var blob = new Blob(["xxxxx"],{ 
type: "image/jpg", 
]) 
// 向 FormData 中 追加 blob 或 file 数 据 
formData. append( 'file', blob); 


下 述 代码 演示 了 使 用 XMLHttpRequest Level 2 同时 向 服务 端 发 送 文本 和 文件 两 种 类 
型 的 数据 。 
【案例 11-4】 xhrUpload. jsp 


<% @ page language = "java" import = "java.util. * " pageEncoding = "utf 一 8" %> 
<!DOCTYPE html > 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = utf — 8"> 
<title > 表单 上 传 </title> 
</head> 
<body> 
<div class = "leftDiv"> 
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< form action = "UploadServlet" method= "post" 
enctype = "multipart/form— data" id = "uploadForm"> 
<table> 
< caption > 用 户 基本 信息 </caption > 
<tr><td> 姓 名 </td> 
<td>< input type = "text" name = "name"></td> 
</tr> 
<tr><td> 年 龄 </td> 
<td>< input type = "text" name = "age"></td> 
</tr > 
<tr><td> 照 片 </td> 
<td>< input type= "file" name = "image"></td> 
</tr> 
<tr> 
<td></td> 
<td>< input type = "button" value = "提交 ”onclick = "sendForm()"> 
</td> 
</tr> 
</table> 
</form> 
</div> 
<div class = "rightDiv"> 
用 户 所 上 传 的 头像 < hr/>< img id = "uploadImage" width = "200px"/> 
</div> 
< script type = "text/javascript"> 
function sendForm(){ 
Var formData = new FormData(document. getElementBYId( 'uploadForm') ); 
formData. append( "sex", " 男 "); 
var xhr = new XMLHttpRequest(); 
xhr. open( 'POST', 'UploadServlet'); // 请 求 url 
xhr. responseType = "json"; 
xhr. send( formData); 
xhr. onload = function(event){ 
if (xhr. status == 200){ 
var json = xhr. response; 
document. getElementById("uploadImage"). src = "upload/" 
+ json. image; 


} elsef{ 
alert(' 出 错 了 '); 
1 
}; 
} 
</script > 
<style> /* … 此 处 样式 省 略 … * / </style> 
</body> 
</html > 


上 述 代 码 中 ,使 用 FormData 来 封装 uploadForm 表单 数据 ,并 使 用 formData. append() 方 
法 向 FormData 对 象 中 追加 额外 数据 。 通 过 xhr. responseType 属性 来 设置 服务 端 返回 的 
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数据 类 型 ,使 用 xhr. response 属性 所 获得 到 的 数据 是 JSON 类 型 。 
此 处 使 用 Servlet 作为 服务 端 技术 ,有 关 服 务 端 代码 请 参见 案例 11-6。 用 户 填 完 基本 信 
息 并 选择 照片 后 , 单 击 “ 提 交 ” 按 钮 将 用 户 的 基本 信息 和 照片 一 起 发 送 到 服务 端 ,服务 端 对 数 
据 处 理 完 成 后 将 处 理 结 果 返 回 给 客户 端 ,在 页 面 中 使 用 XMLHttpRequest. onload 事件 来 
处 理 服 务 端 的 响应 数据 ,并 在 页 面 右 侧 DIV 中 将 上 传 到 服务 端的 图 像 显 示 出 来 ,如 图 11-8 
所 示 。 














© | © localhost:8080/XHR2FileUpload/xhrUploadjsp 


用 户 基本 信息 用 户 所 上 传 的 头像 
|ULove 
2 | 


选择 文件 | ULovejpg 


[| 











图 11-8 XHR 2 数据 请 求 


在 XMLHttpRequest Level 2 中 还 提供 了 upload 属性 ,用 于 获取 文件 上 传 过 程 中 的 进 
度 信息 ,在 upload. progress 事件 处 理 方法 中 ,实现 文件 上 传 进度 条 的 动态 效果 ,代码 如 下 
所 示 。 

【案例 11-5】 uploadProgress-xhr2. html 


<! DOCTYPE html > 
<html lang = "en"> 
<head> 
<title > 文件 上 传 进度 条 效果 </title> 
< meta charset = "UTF — 8"> 
<meta name = "viewport" content = "width = device— width, initial ~ scale=1"> 
</head> 
<body> 
<div class = "leftDiv"> 
< form method = "post" id = "uploadForm" enctype = "multipart/form - data"> 
<table> 
<caption> 资 料 上 传 </caption> 
<tr><td> 上 传 者 </td>< td>< input type = "text" name = "name"></td></tr> 
<tr><td> 上 传 资料 </td>< td>< input type = "file" name = "file"></td></tr> 
<tr> 
<td></td> 
<td>< input type = "button" onclick = "sendForm()"></td> 
</tr> 
</table> 
</form> 
</div> 
<div> 


<h3 > 文件 上 传 进度 </h3 > 
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< div class = "progress"> 
<div id= "outerDiv" style= "width:340px;background: #f0ad4e;"> 
<div id= "progressDiv"></div> 
< span id = "progressNumber"> 0%</span> 
</div> 
</div> 
</div> 
< script type = "text/javascript"> 
function sendForm( ){ 
Var formData = new FormData( document. getElementById( ‘uploadForm')); 
Var xhr = new XMLHttpRequest(); 
xhr. upload. addEventListener("progress" ,uploadProgress, false); 
xhr. addEventListener("load", uploadComplete, false); 
xhr. addEventListener("error", uploadFailed, false); 
xhr. addEventListener("abort", uploadCanceled, false); 
xhr. open( 'POST', 'UploadServlet'); // 请 求 url 
xhr. send( formData); 
function uploadProgress(evt){ 
if(evt. lengthComputable){ 
var outerDiv = document. getElementById("outerDiv"); 
var width = outerDiv. style. width; 
var outWidth = width. substring(0, width. indexOf ("px" )); 
var percentComplete = Math. round(evt. loaded * 100/evt. total); 
document. getElementById( 'progressNumber'). innerHTML 
= percentComplete. toString()+'%'; 
console. log(percentComplete * outWidth+ 'px'); 
document. getElementById( 'progressDiv'). style. width 
= percentComplete/102 * outWidth + 'px'; 
}else{ 
document. getElementById( 'progressNumber'). innerHTML 
= 'unable to compute'; 


} 
function uploadComplete(evt){ 
//alert(evt. target. responseText); 
} 
function uploadFailed(evt){ 
alert(" 文 件 上 传 时 发 生 错 误 !"); 
} 
function uploadCanceled(evt){ 
alert(" 文 件 上 传 被 用 户 取 消 或 由 于 浏览 器 处 于 离线 导致 上 传 被 停止 . "); 


} 
</script > 
< style>/ * … 此 处 样式 省 略 … * /</style> 
</body> 
</html > 








使 用 XMLHttpRequest 对 象 上 传 文件 时 ,在 upload. progress 事件 处 理 方法 中 实时 监 
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控 文件 上 传 进度 ,并 对 进度 条 进行 更 新 ,效果 如 图 11-9 所 示 。 
i 一 一 TSJUSTIET 受 
到 











€ > C |@ocaostaoaox- A : 


资料 上 传 
i 
上 传 资料 先王 文 件 | 不 能 说 的 秘 宅 z 
提交 




















文件 上 传 进度 











11-9 文件 上 传 进度 条 效果 


全 上 述 案 例 中 仅 提供 了 HTML 5 页 面 代码 ,有 关 服 务 端 代码 请 参见 本 书 配套 源码 ,其 
3 中 包含 Java 和 Node.js 服务 端的 两 个 版 本 ,读者 可 自行 测试 。 


11.2.3 基于 Java 的 拍照 上 传 


目前 在 考试 系统 、 股 票 系统 等 应 用 系统 中 需要 用 到 现场 拍照 并 上 传 。 本 节 以 个 人 空间 
为 例 ,使 用 HTML 5 摄像 头 技术 进行 拍照 ,对 所 拍摄 的 照片 进行 范围 选取 ,并 将 最 终 头像 上 
传 到 服务 端 。 除 了 现场 拍照 之 外 ,用 户 也 可 以 选择 本 地 图 像 , 通 过 对 图 像 裁剪 处 理 后 上 传 到 
服务 端 。 

本 节 将 以 Servlet 作为 服务 端 技术 ,实现 个 人 空间 的 头像 更 换 功 能 ,在 服务 端 使 用 
Apache 的 Commons FileUpload 组 件 来 处 理 用 户 文件 上 传 ,关于 Commons FileUpload 组 
件 的 详细 介绍 读者 可 以 查阅 http://commons. apache. org/proper/commons-fileupload/。 

首先 ,创建 一 个 UploadServlet 作为 个 人 空间 的 服务 端 ,代码 如 下 所 示 。 

【案例 11-6】 UploadServlet. java 


import java. io. *; 
import java. util. *; 





import javax. servlet. *; 

import javax. servlet. http. *; 
import java. text. SimpleDateFormat; Eth 
import net. sf. json. JSONObject; 案例 视频 讲解 
import org. apache. commons. fileupload. FileItem; 

import org. apache. commons. fileupload. util. Streams; 

import org. apache. commons. fileupload. FileUploadException; 

import org. apache. commons. fileupload. disk.DiskFileItemFactory; 

import org. apache. commons. fileupload. servlet. ServletFileUpload; 

import org. apache. commons. fileupload. FileUploadBase. * ; 


public class UploadServlet extends HttpServlet{ 
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Private static final long serialVersionUID = 1L; 
public UploadServlet( ){ 
super(); 
| 
protected void doGet (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException{ 
this. doPost (request, response); 
! 
@SsuppressWarnings( "unchecked") 
protected void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException{ 
response. setContentType( "text/htm]1"); 
// 设 置 字符 编码 为 UTF - 8, 这 样 支持 汉字 显示 
response. setCharacterEncoding("UTF — 8"); 
Writer o = response. getWriter(); 
/x 
x 首先 判断 form 的 enctype 是 不 是 multipart/form - data 
* 同时 也 判断 了 forn 的 提交 方式 是 不 是 post 
*/ 
if(ServletFileUpload. isMultipartContent (request)){ 
request. setCharacterEncoding( "utf ~ 8"); 
// 实 例 化 一 个 硬盘 文件 工厂 ,用 来 配置 上 传 组 件 ServletFileUpload 
DiskFileItemFactory factory = new DiskFileItemFactory( ); 
// 设 置 文件 存放 的 临时 文件 夹 , 这 个 文件 夹 要 真实 存在 
File fileDir = new File("fileupload/tmp/"); 
if(fileDir. isDirectory( )&&fileDir. exists() == false){ 
fileDir. mkdir(); 
} 
factory. setRepository(fileDir); 
// 设 置 最 大 占用 的 内 存 
factory. setSizeThreshold(1024000); 
// 创 建 ServletFileUpload 对 象 
ServletFileUpload sfu = new ServletFileUpload(factory); 
sfu. setHeaderEncoding("utf ~ 8"); 
// 设 置 单个 文件 最 大 值 字 节 
sfu. setFileSizeMax(102400000); 
// 所 有 上 传 文件 的 总 和 最 大 值 字 节 
sfu. setSizeMax(204800000); 
List <FileItem> items = null; 
try{ 
items = sfu. parseRequest(request); 
}catch(SizeLimitExceededException e){ 
System. out. println(" 文 件 大 小 超过 了 最 大 值 "); 
}catch(FileUploadException e){ 
e.printStackTrace( ); 
} 
// 取 得 items 的 迭代 器 
Iterator <FileItem> iter = (items == null)?null:items. iterator( ); 
// 图 片上 传 后 存放 的 路 径 目 录 
String uploadPath = request. getServletContext() 
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.getRealPath("/upload" ); 
File uploadPathFile = new File(uploadPath); 
System. out. println(uploadPath); 
if(uploadPathFile. exists() == false){ 
uploadPathFile. mkdirs(); 
} 
// 和 迭代 items 
while(iter!= null&&iter. hasNext()){ 
FileItem item = (FileItem)iter. next(); 
// 当 接收 数据 是 普通 的 表单 域 时 
if(item. isFormField()){ 
System. out. print(" 普 通 的 表单 域 :"); 
System. out. print (new String( item. getFieldName()) +" "); 
System. out. println(new String( item. getString("UTF ~- 8"))); 
} 
// 当 接收 数据 是 文件 域 时 
else if(!item. isFormField()){ 
System. out.println(" 原 图 片 :" + item. getName()); 
SimpleDateFormat formater 
= new SimpleDateFormat ("yyyyMMddhhmmss" ); 
String fileName = item. getName( ); 
String fileNewName = formater, format (new Date( )); 
if(fileName. equals("blob")){ 
fileNewName = fileNewName + ". jpg"; 
Jelse{ 
// 使 用 原来 文件 的 后 级 
String suffixName = fileName. substring( 
fileName. indexOf( '. '), fileName. length( )); 
fileNewName = fileNewName + suffixName; 
} 
BufferedInputStream in = new BufferedInputStream( 
item. getInputStream( ) ) ; 
// 文 件 存储 在 D:/upload/images 目录 下 ,这 个 目录 也 得 存在 
BufferedOutputStream out = new BufferedOutputStream( 
new FileOutputStream(new File( 
uploadPathFile. getAbsolutePath() + "/" + fileNewName))); 
Streams. copy( in, out, true); 
JSONObject jsonObject = new JSONObject( ); 
jsonObject. put("image", fileNewName); 
jsonObject. put("msg",，" 文 件 上 传 成 功 "); 
o.write(jsonObject. toString( )); 
o.flush(); 


由 
}else{ 
System. out. println(" 表 单 的 enctype 类 型 错误 "); 
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接 下 来 ,在 页 面 中 使 用 HTML 5 Canvas 技术 捕获 摄像 头 的 视频 流 , 从 视频 流 中 抓拍 一 
咒 照 片 并 在 第 二 个 Canvas 中 绘制 出 来 ,然后 使 用 Canvas 图 像 处 理 技术 对 照片 进行 裁剪 后 
在 第 三 个 Canvas 中 绘制 出 来 ,代码 如 下 所 示 。 

【案例 11-7】 HTMLSCamera&Upload. html 


<!doctype html > 
<html> 
<head> 
<meta charset = "utf 一 8"> 
<title > 布谷 鸟 的 个 人 空间 -日 志 分 享 </title> 
<link href = "styles/css/main.css" rel = "stylesheet" type = "text/css"> 
</head> 
<body> 
<div class = "container"> 
<div class = "header"> 
<div class = "head — img"> 
< img id= "uploadImage" src= "styles/images/head. jpg"> 
< div class = "button_border margin - t"> 编 辑 头 像 </div> 
</div> 
</div> 
<div class = "content"> 
<ul class = "nav"> 
<1i> 我 的 主页 </1i><1i>< span class = "selected"> 个 人 资料 </span></1i> 
<1i> 相 册 </1i>< 1i> 分 享 </1i><1i> 日 志 </1i><1i> 好 友 </1i> 
</ul> 
<div class = "position"> 
< span class = "arrow"></span> 当 前 所 在 位 置 : 我 的 主页 >> 
< span class = "green"> 个 人 资料 </span> 
</div> 
< h3 > 修改 头像 </h3> 
< form action = "UploadServlet" method= "post" 
enctype = "multipart/form— data" id = "uploadForm"> 
<div class = "left"> 
< div class = "gray_box" > 
<video id = "video" autoplay></video></div> 
<p>< span> 头 像 上 传 : </span> 
< input type= "file" id = "headImage" 
onchange = "changeHeadImage( )"></p> 
<p>< span> 头 像 描 述 : </span> 
< textarea cols = "30" rows = "3"></textarea></p> 
<div class = "save"> 
< span class = "button_border"> 取 消 </span > 
< span class = "button_blue" onclick = "sendForm()"> 保 存 </span> 
</div> 
</div> 
<div class= "right"> 
<p> 拍 照 效 果 : <br/>< br/></p> 
<div class= "photo" id= "box"> 
<canvas id= "canvas" width= "400" height = "300"></canvas > 
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<div id= "shade"></div> 
</div> 
<div> 
< span id = "reSnap" class = "button_border"> 拍 照 </span> 
</div> 
拍照 截图 效果 : < br /> 
<div class = "cutPhoto"> 
< canvas id= "cutCanvas" width = "200" height = "200"></canvas> 
</div> 
</div> 
</form> 
</div> 
</div> 
<div class = "footer"> Copyright 2028 布谷 鸟 工作 室 版 权 所 有 </div> 
< script type = "text/javascript"> 
// 获 得 Canvas 对 象 
var canvas = document. getElementById( "canvas" ); 
var cutCanvas = document. getElementById( "cutCanvas" ); 
Var context = canvas. getContext ("2d"); 
var cutContext = cutCanvas. getContext("2d"); 
// 获 得 video 摄像 头 区 域 
Var video = document. getElementById("video" ) ; 
Var shade = document. getElementById( "shade" ) ; 
Var box = document. getElementById( "box" ); 
Var reSnap = document. getElementById( "reSnap" ); 
// 明 影 区 域 左 上 角 的 x、y 坐标 
Var shadeX, shadeY; 
// 当 DOM 树 构 建 完成 的 时 候 就 会 执行 DOMContentLoaded 事件 
window. addEventListener("DOMContentLoaded", function(){ 
// 兼 容 各 主流 浏览 器 
navigator. getMedia = navigator. getUserMedia 
| |navigator. webkitGetUserMedia| |navigator. mozGetUserMedia 
| |navigator. msGetUserMedia; 
// 从 摄像 头 读 取 视 频 流 ,并 在 video 元 素 中 显示 
navigator. getMedia({ 
video:true, 
audio:false 
}, 
// 读 取 成 功 ,对 视频 流 进行 处 理 
function( stream){ 
if (navigator. mozGetUserMedia){ 
Video. mozSrcObject = stream; 
}else{ 
var vendorURL = window. URL | | window. webkitURL; 
video. src = vendorURL. createObjectURL( stream) ; 
} 
video. play(); 
}, 
// 读 取 失 败 时 所 调用 的 回调 方法 


function(err){ 
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console. 1og(" 错 误 信 息 : " + err); 
]) 
},false); 
// 从 视频 流 中 抓拍 照片 
reSnap. onclick = function(){ 
context. drawImage(video, 0, 0, 400, 300); 
init(); 


shade. style. display = "none"; 


] 
// 绑 定 鼠 标 移 动 所 触发 的 事件 
function init(){ 
box. onmouseout = function(ev){ 
document. body. style. cursor = ""; 
} 
box. onmousemove = function(ev){ 
// 设 定 鼠 标的 样式 
document. body. style. cursor = "move"; 
// 获 取 box 对 象 的 左 侧 到 浏览 器 窗口 左 侧 的 距离 
var boxX = getLeft(box) 7 
// 获 取 box 对 象 的 顶部 到 浏览 器 窗口 顶部 的 距离 
var boxY = getTop(box) ; 
// 计 算 阴 影 区 域 的 左上 角 的 x 坐标 
shadeX = ev. pageX — boxX — 100; 
// 计 算 阴影 区 域 的 左上 角 的 Y 坐 标 
ShadeY = ev. pageY ~ boxY — 100; 
// 防 止 阴 影 区 域 移 到 图 片 之 外 
if(shadex < 0){ 
ShadeX = 0; 
}else if(shadex > 200){ 
ShadeX = 200; 
| 
if(shadeY < 0){ 
shadeY = 0; 
Jelse if(shadeY > 100){ 
shadeY = 100; 
} 
shade. style. display = "block"; 
Shade. style. left = shadeX + "px"; 
Shade. style. top = shadeY + "px"; 
} 
} 
init(); 
box. onclick = function(){ 
// 将 box 的 onmousemove 事件 清空 
box. onmousemove = function( ){ 
}; 
cutContext. drawImage( canvas, shadeX, shadeY,200,200,0,0,200,200); 
shadeX = 0; 
shadeY = 0; 


第 11 章 


// 获 取 元 素 的 纵 坐标 (相对 于 body) 
function getTop(e){ 


Var offset = e. offsetTop; 
if(e. offsetParent!= null){ 
offset += getTop(e. offsetParent); 


} 
return offset; 
! 
// 获 取 元 素 的 横 坐 标 (相对 于 body) 


function getLeft(e){ 


Var offset = e. offsetLeft; 
if (e. offsetParent!= nul1) { 
offset += getLeft(e. offsetParent); 


} 

return offset; 
} 
// 用 于 提交 表单 


function sendForm(){ 


var data = cutCanvas. toDataURL( ); 

data = data. split(', ')[1]; 

data = window. atob(data); 

var ia = new Uint8Array(data. length) ; 

for(var i=0;i<data. length;i++){ 
ia[i] = data. charCodeAt(i); 

} 

//canvas. toDataURL 返回 的 默认 格式 是 image/png 

var blob = new Blob([ia],{ 
type:"image/jpg" 

}); 

// 创 建 FormData 对 象 ,用 于 封装 表单 数据 
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Var formData = new FormData( document. getElementById( ‘uploadForm')); 


formData. append( 'file', blob); 
Var xhr = new XMLHttpRequest( ); 
xhr. open( 'POST', 'UploadServlet'); // 请 求 url 
xhr. responseType = "json"; 
xhr. send( formData); 
xhr. onload = function(event){ 
if(xhr. status == 200){ 
Var json = xhr. response; 
document. getElementById("uploadImage"). src 
= "upload/" + json. image; 
context. fillStyle = "#FFFFFF"; 
context. fillRect(0,0, canvas. width, canvas. height); 
cutContext. fillStyle = " #FFFFFF"; 


cutContext. fillRect(0,0,cutCanvas. width, cutCanvas. height); 


shade. style. display = "none"; 
}else{ 
alert(' 出 错 了 '); 


}; 
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} 
// 用 于 加 载 本 地 图 像 文 件 
function changeHeadImage( ){ 
var file = document. getElementById("headImage" ); 
if(window. FileReader) { 
var fr = new FileReader( ); 
fr. onloadend = function(e){ 
var image = new Image( ); 
image. src = e. target. result; 
image. onload = function(){ 
context. drawImage( image, 0, 0, 400, 300); 
}; 


] 
fr, readAsDataURL(file. files[0]); 
} 
} 
</script > 
</body> 
</html> 


上 述 代 码 运行 时 ,通过 摄像 头 获得 视频 流 并 在 左 侧 Canvas 中 实时 显示 出 来 ,如 图 11-10 
所 示 。 单 击 “ 拍 照 ?按钮 时 ,对 视频 截图 并 在 右 侧 Canvas 中 显示 ; 在 右 侧 Canvas 中 通过 鼠 
标 来 移动 选区 ,在 确定 选区 位 置 后 单 击 对 图 像 进行 截取 并 在 第 三 个 Canvas 中 显示 。 
加 当前 所 在 位 置 ; 我 的 主页 > > 个 人 资料 绩 名 头像 
修改 头像 
yn 
-A 





11-10 个 人 空间 更 换 头 像 


单 击 “ 保 存 ” 按 钮 时 ,使 用 XMLHttpRequest Level 2 技术 将 用 户 最 终 头 像 和 描述 内 容 
一 起 提交 到 服务 端 ,服务 端 对 请 求 数据 处 理 完毕 后 返回 一 个 包含 用 户头 像 和 提示 信息 的 
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JSON 数据 ,在 页 面 中 通过 DOM 操作 来 完成 用 户头 像 的 更 换 , 效 果 如 图 11-11 所 示 。 








目 当 前 所 在 位 置 : 我 的 主页 > > 个 人 资料 


11-11 更 换 后 的 效果 


在 代码 中 ,同时 也 实现 了 使 用 本 地 图 像 来 更 换个 人 空间 的 头像 。 通 过 FileReader 将 本 
地 文件 加 载 到 Canvas 中 ,然后 对 Canvas 进行 裁剪 ,从 而 实现 头像 的 上 传 功能 。 


11.2.4 基于 Node.js 的 拍照 上 传 
本 节 对 个 人 空间 进行 重 构 ,采用 Node. js 作为 服务 端 技术 。 首 先 创建 项 目的 目录 结构 ， 
如 图 11-12 所 示 ,其 中 public 目录 用 于 放置 静态 资源 (如 css images 等 文件 ),uploadFolder 


目录 用 于 存放 用 户 上 传 的 文件 。 
4 项 personalSpace(NodeJS) 
”一 node modules 
4 天 public 
2 I styles 
pm <ss 
b ls images 
[suploadFolder 


四 appjs 
回 HTML5camera&Upload html 


回 packagejson 
国 readmebdt 


11-12 项 目的 目录 结构 


在 控制 台中 ,使 用 npm 命令 对 项 目 进行 初始 化 ,同时 创建 package. json 文件 ,在 
package. json 文件 中 配置 项 目 所 需 的 资源 文件 ,代码 如 下 所 示 。 
【案例 11-8】 package. json 


{ 
"name" :"upload — demo", 


"version":"1.0.0", 
"description":"", 
"main" :"app. js", 
"scripts":{ 
"test":"echo\"Error:no test specified\"&& exit 1" 
}, 
"author" :"jCuckoo", 
"license":"ISC", 
"devDependencies":{ 


"body — parser":""1.17.2", 
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"connect 一 multiparty" :"^2.0.0"， 
Orpress": "4. 15.3" 


} 


在 项 目的 根 目录 下 ,创建 一 个 app.js 文件 ,作为 项 目的 入 口 文 件 ,其 中 包含 路 由 配置 等 


信息 ,代码 如 下 所 示 。 


【案例 11-9】 app.js 


//express 使 用 的 是 @4 版 本 的 
Var express = require( 'express'); 
//connect - multiparty 组 件 用 于 解决 文件 上 传 问题 
var mutipart = require( 'connect ~ multiparty'); 
var mutipartMiddeware = mutipart(); 
var app = express( ); 
// 将 静态 文件 目录 设置 为 "项 目 根 目录 + /public" 
app.use(express. static( 'public')); 
// 修 改 临时 文件 的 存储 位 置 
app. use( mutipart( {uploadDir:'. /public/uploadFolder'} )); 
// 设 置 HTTP 服务 监听 的 端口 号 
app. set( 'port', process. env. PORT| |3000); 
app. listen(app. get( 'port'), function(){ 
console. log( "Express started on http://localhost:" + app. get( 'port')); 
1); 
// 以 下 为 路 由 配置 
//1. 当 访 问 http://localhost:3000/ 时 ,默认 访问 的 页 面 
app. get( '/', function (req, res){ 
res. type( 'text/html '); 
res. sendFile(__dirname + '/HTML5CameragUpload. html'); 
DD 
//2. 当 用 户 使 用 post 方式 提交 表单 到 /upload 服务 时 , 读 取 表单 内 容 并 将 文件 上 传 
app. post( '/upload', mutipartMiddeware, function(req, res){ 
console. log(req. body. name + "\n == == == == =\n"); 
// 这 里 打印 可 以 看 到 接收 到 文件 的 信息 
console. log(req. files. file.path+"\n == == == == =\n"); 
var jsonObject = {}; 
// 默 认 的 路 径 为 : public\uploadFolder\aYm65V_E0Zn1ho51Dd, 需要 将 public\ 部 分 去 掉 
var path= req. files. file. path; 
path = path. substring(path. indexOf("\\")); 
console. log(path); 
jsonObject. image = path; 
jsonObject.msg = "文件 上 传 成 功 !" 
// 给 浏览 器 返回 一 个 成 功 提示 
res. send( jsonObject); 


D); 


上 述 代码 中 ,使 用 require() 方 法 来 加 载 express 和 connect-multiparty 两 个 框架 ,其 中 


express 框架 作为 服务 端的 路 由 ,根据 用 户 的 url 请 求 分 配 到 对 应 的 处 理 程序 ;connect- 
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mnultiparty 框架 用 于 实现 用 户 的 文件 上 传 功 能 。 通 过 app. get() 和 app. post() 方 法 来 定义 
服务 端的 路 由 , 当 用 户 以 get 方式 访问 项 目的 根 路 径 (“/” 路 径 ) 时 将 自动 跳 转 到 /public/ 
HTMIL5Camera&.Upload. html 页 面 ; 当 用 户 以 post 方式 访问 “/upload/” 路 径 请 求 时 , 服 
务 端 将 对 用 户 提 交 的 头像 和 描述 信息 进行 处 理 ,并 返回 一 个 JSON 数据 。 

接 下 来 ,需要 完成 HTML5Camera&Upload. html 页 面 的 编写 ,该 页 面 与 案例 11-7 基 
本 相同 ,此 处 仅 对 sendForm() 方 法 进行 修改 ,代码 如 下 所 示 。 

【案例 11-10】 HTML5Camera& Upload. html 


“此 处 代码 省 略 … 
// 用 于 提交 表单 
function sendForm( ){ 
var data = cutCanvas. toDataURL( ); 
data = data. split(', ')[1]; 
data = window. atob( data); 
var ia= new Uint8Array(data. length); 
for(var i=0;i<data.length;i++){ 
ia[i] = data. charCodeAt (i); 
//canvas. toDataURL 返回 的 默认 格式 是 image/png 
var blob = new Blob([ia], { 
type:" image/jpg" 
1); 
// 创 建 FormData 对 象 ,用 于 封装 表单 数据 
var formData = new FormData(document. getElementById( ‘uploadForm')); 
formData. append( 'file', blob); 
Var xhr = new XMLHttpRequest(); 
xhr. open( 'POST', 'upload'); // 请 求 url 
xhr. responseType = "json"; 
xhr. send( formData); 
xhr. onload = function(event){ 
if(xhr. status == 200){ 
var json = xhr. response; 
document. getElementById("uploadImage" ) . src = json. image; 
context. fillStyle = "# FFFFFF"; 
context. fillRect(0, 0, canvas. width, canvas. height); 
cutContext. fillStyle = "#FFFFFF"; 
cutContext. fillRect(0,0, cutCanvas. width, cutCanvas. height); 
shade. style. display = "none"; 
Jelse{ 
alert(' 出 错 了 '); 
} 
}; 
) 
“此 处 代码 省 略 … 


在 控制 台中 ,使 用 node index. js 命令 来 启动 Node. js 服务 器 ,然后 在 浏览 器 地 址 栏 中 
输入 http://localhost:3000/ 进 行 测试 即 可 ,效果 如 图 11-10 和 图 11-11 所 示 。 
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本 章 总 结 


离线 Web 应 用 程序 是 指 当 客 户 端 与 Web 应 用 程序 的 服务 器 断 开 连 接 时 ,也 能 在 客 

户 端正 常 使 用 该 应 用 程序 ,继续 完成 相应 的 操作 。 

在 Web 应 用 中 允许 为 每 个 页 面 单独 设置 一 个 manifest 文件 ,也 可 以 对 整个 Web 应 

用 程序 指定 一 个 manifest 文件 。 

在 manifest 文件 中 配置 资源 时 ,可 以 将 资源 文件 分 为 CACHE、NETWORK 和 

FALLBACK 三 种 类 型 。 

。 applicationCache 对 象 代表 本 地 缓存 , 当 浏览 器 的 本 地 缓存 更 新 并 载 人 新 的 资源 文 
件 时 ,将 会 触发 applicationCache 对 象 的 onupdateready 事件 来 通知 页 面 本 地 缓存 
已 经 更 新 。 

。 HTML 5 规范 提供 了 NavigatorOnLine 接口 ,用 于 检测 浏览 器 的 联网 状态 。 

。 Ajax 技术 的 核心 是 XMLHttpRequest 对 象 ,XMLHttpRequest 中 提供 了 客户 端 和 
服务 端 之 间 的 交互 接口 。 

。 在 HTML 5 之 前 , 绝 大 多 数 浏览 器 只 能 通过 XMLHttpRequest 对 象 的 send() 方 法 
向 服务 端 发 送 字符 串 或 document 对 象 。 

。 HTML 5 规范 对 XMLHttpRequest 对 象 的 send() 方 法 进行 了 改良 ,使 其 能 够 发 送 

字符 串 .document 对 象 .表单 数据 .Blob 对 象 .文件 以 及 ArrayBuffer 对 象 。 


本 章 练习 


1. Web 应 用 程序 的 本 地 缓存 是 通过 文件 来 管理 的 ,该 文件 是 一 个 简单 的 文本 
文件 ,文本 内 容 以 形式 说 明 需 要 缓存 或 不 需要 被 缓存 的 资源 文件 的 URL 路 径 和 
文件 名 称 。 

2. 在 manifest 文件 中 ,第 一 行 必须 是 ,用 于 说 明 当 前 文件 是 对 本 地 
缓存 资源 的 具体 配置 。 文 件 中 的 注释 说 明 行 需要 以 开头 ,表示 当前 行 用 于 提供 说 
明 ,在 文本 解析 时 将 忽略 该 行 。 

3. 在 manifest 配置 资源 文件 中 ,可 以 将 资源 文件 分 为 和 
三 种 类 型 。 

4. 对 象 代表 本 地 缓存 , 当 浏览 器 对 本 地 缓存 更 新 并 载 人 新 的 文件 时 ,将 会 触 
发 该 对 象 的 事件 ,来 通知 用 户 本 地 缓存 已 经 被 更 新 。 

5. HTML 5 规范 提供 了 接口 ,用 于 检测 浏览 器 的 联网 状态 ,其 
中 属性 是 一 个 只 读 属 性 ,用 于 返回 浏览 器 的 当前 联网 状态 。 

6. 对 象 作为 Ajax 的 核心 对 象 ,为 向 服务 端 发 送 请 求 和 解析 服务 器 响应 提供 
了 接口 。 

7. 在 XMLHttpRequest Level 2 中 对 send() 方 法 进行 改进 ,使 其 可 以 发 送 

有 以 及 对 象 。 
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AS 本 章 目标 


。 了解 Web Worker 多 线程 概念 。 

。 数 悉 Worker 接口 以 及 线程 谋 套 。 

。 了 解 SharedWorker 线程 间 的 共享 原理 。 
。 掌握 Geolocation 地 理 定位 。 

。 了解 百度 地 图 API 和 位 置 定位 。 


12.1 Web Worker 概述 


在 传统 的 页 面 中 ,所 有 的 处 理 都 在 单线 程 中 执行 , 当 在 页 面 中 执行 脚本 时 ,页 面 处 于 无 
响应 状态 ,直到 脚本 执行 完毕 , 当 脚 本 的 执行 过 程 较 长 时 ,页面 便 会 处 于 长 时 间 无 响应 状态 ， 
即 假死 状态 。 

HTML 5 规范 中 新 增 了 Web Worker 技术 ,为 JavaScript 提供 了 一 种 多 线程 解决 方案 。 
Web Worker 是 一 种 能 够 在 后 台 运 行 的 JavaScript 脚本 ,能 够 独立 于 其 他 脚本 ,在 执行 时 不 
会 干扰 用 户 界 面 操作 。 当 执行 时 间 较 长 的 业务 处 理 时 ,可 由 Web Worker 在 后 台 进 行 处 理 ， 
从 而 不 影响 用 户 的 界面 操作 (如 单 击 、 内 容 选 取 等 )。Web Worker 技术 适用 于 以 下 场合 。 

。 大 数据 分 析 与 计算 处 理 ; 

。 预先 抓 取 数 据 缓存 到 本 地 ,以 便 后 期 使 用 ; 

。 本 地 数据 库 中 的 数据 存储 与 计算 处 理 ; 

。 后台 1/O 处理 ; 

。 Canvas 绘图 中 的 图 像 数 据 的 计算 及 生成 处 理 。 


12.1.1 Worker 接口 


HTML 5 规范 提供 了 Worker、SharedWorker 和 AbstractWorker 接口 ,其 中 Worker 和 
SharedWorker 接口 均 继 承 自 AbstractWorker 接口 。 AbstractWorker 接口 的 语法 格式 如 下 。 

【语法 】 

interface AbstractWorker: EventTarget{ 


attribute EventHandler onerror; 
}; 
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其 中 : onerror 用 于 设置 当前 线程 发 生 错误 时 所 调用 的 事件 处 理 方法 。 
Worker 接口 继承 了 AbstractWorker 接口 ,另外 还 提供 了 terminate() 和 postMessage() 方 
法 ,Worker 接口 语法 格式 如 下 。 
【语法 】 
interface Worker:AbstractWorker{ 
void terminate( ); 
void postMessage(any message, optional sequence < Transferable> transfer); 


attribute EventHandler onmessage; 
}; 


其 中 : 

。 terminate() 方 法 用 于 终止 当前 Web Worker 对 象 ; 

。 postMessage() 方 法 用 于 在 线程 之 间 传 递 数据 ; 

。 onmessage 属性 用 于 设置 当前 线程 接收 到 数据 时 所 调用 的 事件 处 理 方法 。 
通过 Worker 的 构造 方法 来 创建 一 个 Web Worker 对 象 ,语法 格式 如 下 。 
【语法 】 


Var worker = new Worker (URL); 


其 中 ,参数 URL 表示 需要 在 后 台 线 程 中 执行 的 脚本 文件 的 URL 地 址 。 主 页 面 与 
Worker 之 间 只 能 通过 postMessage() 方 法 和 onmessage 事件 来 传递 数据 。 
【示例 】 创建 一 个 WebWorker 对 象 


Var worker = new Worker( 'js/test. js'); 
worker. onmessage = function(e){ 

var data = e. data; 

console. log( data); 
} 


下 述 代码 使 用 Worker 线程 技术 来 实现 随机 洗 牌 效果 。 首 先 ,为 Array 对 象 提供 
shuffle() 方 法 ,用 于 对 数组 中 的 数据 随机 排序 ,代码 如 下 所 示 。 
【案例 12-1】 array.js 


Array. prototype. shuffle = function(){ 
_this= this; 
this. result = []; 
this. num = this. length; 
for(var i=0;i<this.num;i++){ 
(function(i){ 
Var temp = this; 
var m= Math. floor(Math. random( ) * temp. length); 
_this. result[i] = temp[m]; 
_this. splice(m, 1); 
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D) (i); 
} 
return this. result; 


! 


接 下 来 ,创建 一 个 后 台 线 程 dealNum. js, 用 于 对 前 台所 传递 的 纸牌 数据 进行 随机 排序 ， 
并 随机 将 某 一 纸牌 改 为 “ 红 桃 A”, 代 码 如 下 所 示 。 
【案例 12-2】 dealNum. js 


// 导 入 JavaScript 脚本 

importScripts( 'array. js'); 

onmessage = function(e){ 
var data = e. data; 
data. shuffle( ); 
//num 和 result 属性 是 由 Array. prototype. shuffle 所 产生 的 
var num = parseInt(Math. random( ) * data. num); 
array= data[ 'result']; 
array[num] = 1; // 红 桃 A 
PpostMessage(array); 

} 


在 页 面 中 ,默认 按照 从 小 到 大 的 顺序 来 显示 纸牌 。 当 用 户 单 击 * 随 机 洗 牌 ?按钮 时 ,页 面 
主线 程 将 纸牌 数据 发 送 到 后 台 线程 dealNum. js, 由 后 台 线 程 对 数组 随机 排序 ,并 将 处 理 结 
果 返 回 给 页 面 主线 程 ,最 后 在 页 面 中 通过 操作 DOM 对 象 将 结果 显示 出 来 。 

【案例 12-3】 randomShuffleCard. html 


<!DOCTYPE html > 
<html> 
<head> 
< meta charset = "UTF - 8"> 
<title> WebWorker - 随机 洗 牌 </title> 









I 





er 
i 案例 视频 讲解 
img{width:100px;margin: 3px;} 
</style> 
</head> 
<body> 
< hl > 随机 洗 牌 </hl >< hr/> 


<div id= "cardList"></div><hr/> 
< input type = "button" value = "随机 洗 牌 " onclick = "shuffleCard()"/> 
< script type = "text/javascript"> 
var arrayData = [8,9,10,11,12,13]; 
Var worker = new Worker( 'js/dealNum. js'); 
worker. onmessage = function(e){ 
var data = e. data; 
console. log(data) 
initCard(data); 
} 
function shuffleCard( ){ 
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worker. postMessage(arrayData); 

} 

function initCard(array){ 
var result = ""; 
for(var i=0;i<array. length;i++){ 

result += "< img src = 'images/card— " +array[i] + ".png'/>"; 

} 
document. getElementById("cardList"). innerHTML = result; 

} 

document. onload = initCard(arrayData); 

</script> 
</body> 
</html > 


上 述 代 码 中 ,使 用 new Worker() 方 法 来 创建 一 个 WebWorker 实例 ,然后 使 用 worker. 
postMessage() 方 法 将 页 面 中 的 数据 传递 给 后 台 线 程 ,后 台 线 程 数 据 处 理 完毕 后 ,将 数据 发 
送 到 页 面 主线 程 ,同时 触发 onmessage 消息 接收 事件 ,并 调用 对 应 的 事件 处 理 方法 。 代 码 运 
行 结果 如 图 12-1 所 示 。 
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图 12-1 Worker 随机 洗 牌 


12.1.2 Worker 线程 嵌 套 


在 HTML 5 中 ,Worker 线程 允许 嵌 套 子 线程 ,通过 线程 的 嵌 套 可 以 将 一 个 较 大 的 任务 
切 分 成 多 个 小 任务 ,然后 由 多 个 子 线程 分 别 进行 处 理 , 以 提高 页 面 处 理 能 力 。 

下 述 代 码 使 用 随机 翻 牌 游戏 来 演示 Worker 线程 的 嵌 套 及 线程 之 间 的 数据 传递 。 首 
先 , 创 建 一 个 Worker 子 线程 randomArray. js, 用 于 生成 一 个 随机 长 度 的 数组 ( 即 扣 牌 数 
组 ) ,然后 随机 生成 一 组 扣 牌 数据 并 保存 到 数组 中 .代码 如 下 所 示 。 

【案例 12-4】 randomArray. js 


onmessage = function(event){ 
var data = event. data; 
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Var num = parseInt(Math. random() * data); 
console. log(num) 
var randomArray = [ ]; 


if(num== 0){ 
randomArray. push(num); 
}elsef 


for(var i=0;i<num;it+){ 
Var randomNum = parseInt(Math. random( ) * data); 
randomArray. push( randomNum); 
! 
} 
postMessage( randomArray); 
} 


接 下 来 ,创建 一 个 Worker 子 线程 dealCard. js, 用 于 接收 页 面 所 传递 的 纸牌 数据 ,并 对 
数据 随机 排序 ,然后 通过 randomArray. js 子 线程 来 获得 扣 牌 数据 ,代码 如 下 所 示 。 
【案例 12-5】 dealCard. js 


// 导 入 JavaScript 脚本 
importScripts( 'array. js') 7 
onmessage = function(event){ 
var data = event. data; 
data. shuffle( ); 
var array = data[ 'result']; 
Var innerWorker = new Worker( 'randomArray. js'); 
innerWorker. postMessage(array. length); 
innerWorker. onmessage = function(event){ 
var randomData = event. data; 
console. log(randomData) 
for(var i= 0;i< randomData. length; i++){ 
array[randomData[i]] = 15; 
} 
postMessage(array); 


} 


在 页 面 中 ,默认 按照 升序 来 显示 纸牌 的 次 序 。 当 用 户 单 击 “ 随 机 翻 牌 ” 按 钮 时 ,页 面 主线 
程 将 需要 的 纸牌 数据 发 送 到 子 线程 dealCard. js, 并 由 子 线程 对 数据 进行 随机 处 理 后 将 结果 
返回 到 页 面 主线 程 ,最 后 通过 DOM 操作 生成 随机 翻 牌 效果 。 

【案例 12-6】 randomFlipCard. html 


<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "UTF ~ 8"> 
<title> WebWorker- 随机 翻 牌 </title> 
< style> 
img{width:100px;margin:3px;} 
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</style> 
</head> 
<body> 
< hl > 随机 翻 牌 </hl >< hr /> 
<div id= "cardList"></div><hr /> 
< input type = "button" value = "随机 翻 牌 " onclick = "flipCard()"/> 
< script type = "text/javascript"> 
var arrayData = [8,9,10,11,12,13]; 
Var worker = new Worker( 'js/dealCard. js'); 
function flipCard( ){ 
worker. postMessage(arrayData) 
} 
worker. onmessage = function(e){ 
Var data = e. data; 
console. log(data) 
initCard(data); 
} 
function initCard(array){ 


for(var i=0;i<array. length;i++){ 
result += "< img src = 'images/card— " +array[i] + ".png'/>"; 

} 
document. getElementById("cardList"). innerHTML = result; 

} 

document. onload = initCard(arrayData); 

</script> 
</body> 
</html > 


上 述 代码 中 ,在 页 面 randomFlipCard. html 中 主线 程 将 对 纸牌 数组 初始 化 ,然后 发 送 给 
子 线程 dealCard. js, 再 由 该 子 线程 调用 randomArray.js 子 线程 ,实现 数组 排序 以 及 扣 牌 数 
据 的 生成 ,代码 运行 结果 如 图 12-2 所 示 。 单 击 “ 随 机 翻 牌 ” 按 钮 ,会 对 扑克 进行 重新 排序 ,并 
随机 产生 明 牌 和 扣 牌 数据 。 


过 | (7 127.0.0.1:8020/ 章 节 尖 码 /chapter 转 C | Q Be <Cw/sk> 

















图 12-2 Worker 线程 嵌 套 
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A 截至 目前 ,Chrome 浏览 器 暂 不 支持 Worker 谋 套 ,读者 可 以 使 用 Firefox 浏览 器 进 
锭 。 行 则 试 。 


12.1.3 SharedWorker 接口 


在 页 面 主 线程 与 Worker 子 线程 之 间 传递 数据 时 会 对 数据 进行 复制 ,主线 程 与 Worker 
子 线程 不 会 共享 同一 个 实例 ,而 是 在 每 次 通信 结束 时 生成 一 个 副本 数据 。 

HTML 5 规范 提供 了 一 个 SharedWorker( 共 享 线程 ) 接 口 , 有 效 地 解决 了 线程 之 间 的 
数据 共享 问题 。SharedWorker 接口 继承 了 AbstractWorker 接口 ,可 以 在 浏览 器 和 线程 之 
间 共 享 数据 。SharedWorker 接口 的 语法 格式 如 下 。 

【语法 】 


interface SharedWorker: AbstractWorker{ 
readonly attribute MessagePort port; 
}; 


其 中 : port 属性 (只 读 ) 是 一 个 MessagePort 类 型 的 对 象 ,用 于 指定 SharedWorker 共享 
线程 的 通信 端口 。 

SharedWorker 线程 拥有 一 个 connect 事件 ,在 每 次 获得 请 求 连接 时 就 会 触发 connect 
事件 。 在 事件 处 理 方法 中 ,通过 ports 属性 来 获得 连接 SharedWorker 的 通信 端口 ,使 用 该 
端口 向 连接 请 求 者 发 送 消 息 。 

【示例 】 共享 子 线程 SharedWorker 


onconnect = function(event){ 
var port = event. ports[0]; 
port. postMeassge(" 这 是 一 个 共享 SharedWorker!"); 


下 述 代码 演示 了 使 用 SharedWorker 实现 幸运 抽奖 。 首 先 , 创 建 一 个 SharedWorker 共 
享 线程 luckyNum. js, 用 于 统计 当前 连接 的 次 数 、 幸 运 抽奖 次 数 以 及 本 次 幸运 名 单 , 代 码 如 
下 所 示 。 

【案例 12-7】 luckyNum. js 


// 接 收 父 线程 传递 的 数据 
var count = 0; // 分 会 场 计数 
var luckyTime = 0; // 幸 运 抽奖 次 数 
// 当 共享 线程 获得 连接 时 触发 该 事件 
onconnect = function(e){ 

Var port = e. ports[0]; 

count += 1; 

port. postMessage( {"count" :count}); 

// 获 得 连接 源 
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Var Worker = e. source; 
Worker. onmessage = function(e){ 
luckyTime += 1; 
var luckyData = new Array(18); 
for(var i= 0;i< luckyData. length; i++){ 
luckyData[ i] = parseInt(Math. random( ) * 107); 
. 
var data = {'luckyTime': luckyTime, 'luckyData': luckyData}; 
worker. postMessage( data); 


}; 


接 下 来 ,实现 页 面 sharedWorker. html, 在 页 面 中 调用 共享 线程 luckyNum. js, 并 与 之 
实现 数据 通信 ,代码 如 下 所 示 。 
【案例 12-8】 sharedWorker. html 


<!DOCTYPE html > 
< htm]l > 
< head > 
<meta charset = "UTF ~ 8"> 
<title> SharedWorker - 幸运 名 单 </title> 
<style> 
img {width: 100px; height: 100px; margin: 3px; box - shadow: 0 0 5px 





#0CC;} 
table{width:680px;} 
#3container{width:700px;margin: 0 auto;} 
</style> 
</head> 
<body> 
<div id= "container"> 
< h3 > 幸运 抽奖 (第 < span id= "part"></span> 区 )</h3> 
<div id= "resultDiv"> 
<table> 
<tr><th colspan= "6" align= "right"> 
< span id = "luckyTime"> 暂 无 幸运 用 户 </span></th></tr> 
<tbody id = "showBody"></tbody> 
</table> 
</div><hr /> 
< input type = "button" value = "幸运 名 单 " onclick = "getLuckyList()"/> 
<ahref="#"target= "blank"> 其 他 幸运 抽奖 区 </a> 
</div> 
< script type = "text/javascript"> 
Var worker = new SharedWorker( 'js/luckyNunm. js'); 
function getLuckyList(){ 
worker. port. postMessage( "test"); 
} 
worker. port. onmessage = function(e){ 
if(e. data. count!= null1){ 
var partDiv = document. getElementById( "part"); 
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partDiv. innerHTML = e. data. count; 
Jelse{ 
var luckyTimeDiv = document. getElementById("luckyTime" ); 
luckyTimeDiv. innerHTML = "第 " + e. data. luckyTime + "次 获取 的 幸运 用 户 "; 
Var showBody = document. getElementById( "showBody" ); 
var luckyData = e. data. luckyData; 
var dataRow = ""; 
// 表 格 一 行 中 的 单元 格 数量 
Var size=6; 
for(var i=0;i< luckyData. length; i++){ 
if(i% size==0){ 
dataRow += "< tr>"; 
} 
dataRow += "< td width = '40px>< img src = 'images/" 
+ (luckyData[i] + 1) + ".jpg'/></td>"; 
if(i% size== size 一 1){ 
dataRow += "</tr >"; 


} 
} 
showBody. innerHTML = dataRow; 
} 
} 
</script > 
</body> 
</html > 


上 述 代 码 运行 结果 如 图 12-3 所 示 , 单 击 “ el -个 新 窗口 ， 
使 用 SharedWorker 实现 两 个 页 面 线程 之 间 的 数据 共享 ,对 幸运 抽奖 区 和 幸运 抽奖 次 数 同 
步 计 数 。 当 单 击 “幸运 抽奖 ?按钮 时 将 重新 生成 ! hh 奖 名 单 ， 并 且 幸 运 抽奖 次 数 加 1。 
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图 12-3 ”幸运 抽奖 
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12.2 地理 位 置 


地 理 位 置 (Geolocation) 是 HTML 5 规范 中 的 重要 特性 之 一 ,其 中 提供 了 关于 用 户 位 置 
的 地 理 定位 功能 ,通过 该 特性 可 以 实现 基于 位 置信 息 的 应 用 。HTML 5 中 的 geolocation 对 
象 用 于 获取 客户 端的 当前 经 度 和 纬度 ,调用 百度 .谷歌 或 高 德 地 图 API 接口 ,从 而 获得 客户 
端 所 在 的 地 理 位 置 , 包 括 省 市 区 信息 ,甚至 有 街道 .门牌 号 等 详细 的 地 理 位 置信 息 。 


和 Geolocation 特性 可 能 侵犯 用 户 的 隐私 , 故 在 使 用 地 理 位 置 定位 时 需要 得 到 用 户 授 
多。 权 许 可 ,否则 无 法 获得 用 户 位 置信 息 。 


使 用 地 理 位 置 之 前 ,首先 需要 检测 一 下 浏览 器 是 否 支 持 Geolocation 特性 ,代码 如 下 
所 示 。 
【示例 】 判断 Geolocation 是 否 可 用 


if(navigator. geolocation){ 

console. 1og( 'geolocation is available'); 
Jelse{ 

console. 1og( 'geolocation is not available'); 


} 


在 window 对 象 中 提供 了 一 个 Navigator 类 型 的 navigator 对 象 ,在 navigator 对 象 中 ， 
geolocation 属性 用 于 返回 一 个 Geolocation 类 型 对 象 。Navigator 接口 的 语法 格式 如 下 。 

【语法 】 

partial interface Navigator{ 


readonly attribute Geolocation geolocation; 
}; 


其 中 : geolocation 属性 (只 读 ) 用 于 获得 一 个 Geolocation 类 型 的 对 象 。 

在 Geolocation 接口 中 提供 了 getCurrentPosition()、watchPosition() 和 clearWatch() 
三 个 方法 ,用 于 监视 用 户 的 地 理 位 置 ,Geolocation 接口 的 语法 格式 如 下 。 

【语法 】 


interface Geolocation{ 
void getCurrentPosition(PositionCallback successCallback, 
optional PositionErrorCallback errorCallback, 
optional PositionOptions options); 


long watchPosition(PositionCallback successCallback, 
optional PositionErrorCallback errorCallback, 
optional PositionOptions options); 
void clearWatch( long watchId) ; 
}; 
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。 getCurrentPosition() 方 法 用 于 获得 用 户 当 前 的 地 理 位 置信 息 ,参数 successCallback 
表示 在 成 功 获 取 地 理 信息 时 所 调用 的 回调 方法 ,参数 errorCallback 表示 获取 地 理 
信息 失败 时 所 调用 的 回调 方法 ,参数 options 是 一 个 可 选 列表 ,用 于 设置 地 理 位 置信 
息 的 高 精度 .超时 限制 和 位 置 缓存 有 效 时 间 ; 

。 watchPosition() 方 法 用 于 持续 跟踪 用 户 的 地 理 位 置 ,参数 与 getCurrentPosition() 
方法 完全 相同 ; 

。 clearWatch() 方 法 用 于 停止 对 当前 用 户 的 地 理 位置 的 监视 。 

在 successCallback 回调 方法 中 提供 了 一 个 Position 类 型 的 position 参数 ,通过 
position 参数 来 获得 一 个 Coordinates 坐标 对 象 。Position 接口 的 语法 格式 如 下 。 
【语法 】 
interface Position{ 
readonly attribute Coordinates coords; 
readonly attribute DOMTimeStamp timestamp; 
}; 


其 中 ， 
。 coords 属性 (只 读 ) 是 一 个 坐标 对 象 ,其 中 包含 当前 位 置 的 经 纬度 等 信息 ; 
。 timestamp 属性 (只 读 ) 是 一 个 时 间 蕉 ,表示 获取 地 理 位 置 对 象 的 时 间 点 。 
在 Coordinates 接口 中 提供 了 当前 地 理 位 置 的 经 度 纬度, 海拔 高 度 ,海拔 精度 .设备 的 
前 进 方向 ,前进 速度 等 信息 ,语法 格式 如 下 。 
【语法 】 
interface Coordinates{ 
readonly attribute double latitude; 
readonly attribute double longitude; 
readonly attribute double altitude; 
readonly attribute double accuracy; 
readonly attribute double altitudeAccuracy; 
readonly attribute double heading; 
readonly attribute double speed; 
}; 


其 中 : 

。 latitude 属性 (只 读 ) 表 示 当 前 地 理 位 置 的 纬度 ; 

。 longitude 属性 (只 读 ) 表 示 当 前 地 理 位 置 的 经 度 ; 

。 altitude 属性 (只 读 ) 表 示 当 前 地 理 位 置 的 海拔 高 度 ,不 能 获取 时 返回 null; 

。 accuracy 属性 (只 读 ) 表 示 纬 度 或 经 度 的 精度 ,以 m 为 单位 ; 

altitudeAccuracy 属性 (只 读 ) 表 示 海 拔高 度 的 精度 ,以 m 为 单位 ; 

heading 属性 (只 读 ) 表 示 设 备 的 前 进 方向 ,使 用 面 朝 正 北方 向 时 的 顺 时 针 旋 转角 度 
来 表示 ,不 能 获取 时 返回 null; 

。 speed 属性 (只 读 ) 表 示 设 备 的 前 进 速度 ,以 m/s 为 单位 ,不 能 获取 时 返回 null。 
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下 述 代码 演示 了 使 用 Geolocation 接口 的 successCallback() 回 调 方法 来 获取 用 户 地 理 
位 置 的 经 纬度 信息 。 
【示例 】 获取 当前 位 置 的 经 纬度 


if(navigator. geolocation){ 

console. 1og( 'geolocation is available'); 

navigator. geolocation. getCurrentPosition( successCallback, errorCallback); 
}else{ 

console. log( 'geolocation is not available'); 
1 
function successCallback(position){ 

var lng = position. coords. longitude; 

var lat = position. coords. latitude; 

var timestamp = position. timestamp; 

console. 1og(" 经 度 :" + 1ng); 

console. 1og(" 纬 度 :" + lat); 

console. 1og(" 时 间 戳 :" + timestamp); 
function errorCallback(error){ 

console. log(error); 


} 


12.3 百度 地 图 API 


在 获得 当前 位 置 的 经 度 和 纬度 之 后 ,可 以 借助 百度 、 谷 歌 等 地 图 服务 来 显示 当前 位 置 。 
本 书 以 百度 地 图 为 例 进行 讲解 ,在 百度 地 图 开发 平台 中 提供 了 JavaScript、Android\iOS 等 
多 种 API 接口。 在 HTML 5 页 面 中 ,通过 百度 地 图 的 JavaScript API 实现 用 户 的 位 置 定 
位 ,百度 地 图 API 免费 对 外 开放 , 且 无 使 用 次 数 限制 。 在 使 用 百度 地 图 API 时 ,需要 先 去 百 
度 地 图 开发 平台 (Chttp://lbsyun. baidu. com/apiconsole/key? application 王 key) 申 请 密 钥 。 

申请 密 钥 之 后 ,通过 以 下 几 步 实现 在 百度 地 图 中 进行 定位 。 

(1) 在 页 面 中 引入 百度 地 图 API 的 脚本 文件 ,导入 方法 如 下 : 


< script type = "text/javascript" src= "http://api.map. baidu. com/getscript?v= 2.0 
&ak = 8245d15353728837399a8cc78e314f74"></script > 


上 述 代码 中 ,参数 ak 的 值 是 用 户 所 申请 的 百度 地 图 密 钥 .读者 自行 替换 即 可 。 

(2) 创建 地 图 容器 元 素 。 

在 页 面 中 使 用 百度 地 图 时 ,需要 一 个 HTML 元 素 ( 通 常 使 用 div 元 素 ) 作 为 地 图 的 容 
器 ,借助 该 容器 将 地 图 展现 到 页 面 中 。 

(3) 命名 空间 API。 

百度 地 图 使 用 BMap 作为 命名 空间 ,所 有 类 均 在 该 命名 空间 之 下 ,如 BMap. Map、 
BMap. Control、.BMap. Overlay 等 类 。 
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(4) 创建 地 图 实例 。 
在 BMap 命名 空间 中 ,Map 类 表示 地 图 元 素 , 通 过 new 操作 符 来 创建 一 个 地 图 实例 。 
BMap. Map() 构 造 方法 的 参数 可 以 是 一 个 HTML 元 素 的 ID, 也 可 以 是 一 个 DOM 对 象 。 





var map = new BMap. Map( "container" ); 


(5) 创建 点 坐标 。 
在 BMap 命名 空间 中 ,Point 类 用 于 描述 一 个 地 理 坐 标点 ,通过 BMap. Point() 构 造 方法 
来 创建 一 个 坐标 点 ,构造 方法 的 第 一 个 参数 为 经 度 , 第 二 个 参数 为 纬度 。 


var point = new BMap. Point (120. 396, 36. 307); 


上 述 代码 中 ,参数 120. 396 表示 经 度 ,参数 36. 307 表示 纬度 。 

(6) 地 图 初始 化 。 

创建 地 图 实例 之 后 ,需要 对 其 进行 初始 化 ,地 图 经 过 初始 化 后 才能 执行 其 他 操作 。 在 百 
度 地 图 API 中 提供 了 BMap. Map. centerAndZoom() 方 法 ,用 于 设置 地 图 中 心 点 坐标 和 地 
图 级 别 。 


map. centerAndZoom( point, 15); 


(7) 启用 滚轮 放大 缩小 。 
通过 滚动 鼠标 滑轮 来 放大 或 缩小 地 图 时 ,需要 使 用 BMap. Map. 
enableScrollWheelZoom() 方 法 进行 设置 。 


map. enableScrollWheelZoom( ); 


(8) 添加 位 置 标记 点 。 
当 需 要 在 地 图 中 添加 位 置 标记 点 时 ,使 用 BMap. Marker 类 来 创建 一 个 位 置 点 ,然后 使 
用 BMap. Map. addOverlay() 方 法 将 位 置 点 添加 到 地 图 中 。 


var marker = new BMap. Marker (point); 
map. addOverlay(marker); 


下 述 代码 演示 了 使 用 Geolocation 对 象 来 获得 当前 地 理 位 置信 息 , 然 后 调用 百度 地 图 
API 将 当前 位 置 在 地 图 中 显示 出 来 。 
【案例 12-9】 baidu01. html 


<!DOCTYPE html > 
< html > 
< head> 
<meta charset = "UTF 一 8"> 
<title> 百 度 地 图 定位 </title> 国 叶 
< style type = "text/css"> 案例 视频 讲解 
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html{height:100% } 
body{ height:100 % ;margin:0px;padding:0px} 
#container{height:100%} 
</style> 
< script type = "text/javascript" src = "http://api.map. baidu. com/ 
getscript?v = 2. 0&ak = 8245d15353728837399a8cc78e314f74"></script > 
</head> 
<body> 
<div id= "container"></div> 
<script> 
if(navigator. geolocation){ 
var options=1{ 
enableHighAcuracy: true 
}; 
navigator. geolocation. getCurrentPosition( successCallback, 
errorCallback, options); 
} elsef 
console. log( ' 位 置 定位 功能 不 可 用 ! '); 
上 
function successCallback(position){ 
Var longitude = position. coords. longitude; 
var latitude = position. coords. latitude; 
Var map = new BMap. Map( "container" ); 
var point = new BMap. Point (longitude, latitude); 
Var marker = new BMap. Marker (point); 
map. addOverlay (marker); 
map. centerAndZoom( point, 12); 
map. enableScrollWheelZoom( ); 


} 
function errorCallback(error){ 
var errorType= { 
1:" 位 置 服务 被 拒绝 "， 
2:" 获 取 不 到 位 置信 息 "， 
3:" 获 取信 息 超 时 "， 
4:" 未 知 错误 " 
} 
console. 1og(" 不 能 定位 您 的 当前 地 理 位 置 :" + errorType[ error. code]); 
} 
</script> 
</body> 
</html > 


上 述 代 码 中 ,首先 判断 浏览 器 是 否 授权 允许 获取 当前 地 理 位 置信 息 , 当 浏览 器 授权 访问 
地 理 位 置信 息 时 ,将 调用 successCallback() 回 调 方法 。 在 successCallback() 方 法 中 ,使 用 
BMap. Map() 方 法 来 创建 一 个 Map 地 图 对 象 ,然后 根据 Geolocation 地 理 位 置 进行 定位 , 效 
果 如 图 12-4 所 示 。 

除 此 之 外 ,还 可 以 在 地 图 中 添加 控件 、 覆 盖 物 、 地 图 图 层 、 工 具 、 服 务 、 用 户 数据 图 层 、 全 
景 图 展现 定制 个 性 地 图 等 功能 。 其 中 ,控件 是 指 在 百度 地 图 中 负责 与 地 图 交互 的 UI 元 
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12-4 地 理 位 置 定位 





素 , 具 体 见 表 12-1。 
表 12-1 百度 地 图 控件 
类 型 描 述 
Control 控件 的 抽象 基 类 ,所 有 控件 均 继承 此 类 ,通过 此 类 可 实现 自 定义 控件 





NavigationControl 


地 图 平移 缩放 控件 ,PC 端 默认 位 于 地 图 左上 方 , 它 包含 控制 地 图 的 平移 和 
缩放 的 功能 ; 移动 端 提 供 的 缩放 控件 ,默认 位 于 地 图 右 下 方 





OverviewMapControl 


缩 略 地 图 控件 ,默认 位 于 地 图 右 下 方 , 是 一 个 可 折合 的 缩 略 地 图 











ScaleControl 比例 尺 控件 ,默认 位 于 地 图 左下 方 , 显 示 地 图 的 比例 关系 
MapTypeControl 地 图 类 型 控件 ,默认 位 于 地 图 右上 方 
CopyrightControl 版 权 控 件 , 默 认 位 于 地 图 左下 方 





GeolocationControl 





定位 控件 ,针对 移动 端 开发 ,默认 位 于 地 图 左下 方 


下 述 代 码 演示 了 百度 地 图 中 控件 的 使 用 方法 。 
【示例 】 向 地 图 中 添加 控件 


map. addControl (new BMap. NavigationControl( )); 
map. addControl (new BMap. MapTypeControl( )); 
map. addControl (new BMap. OverviewMapControl( )); 


百度 地 图 API 可 以 将 用 户 上 传 到 LBS 云 里 的 位 置 数据 实时 演 染 成 图 层 , 然 后 通过 用 户 
数据 图 层 (CustomLayer) 对 象 释 加 到 地 图 中 。 目 前 LBS 云 支 持 用 户 存储 poi 数据 ,存储 的 
字段 除 经 纬度 、 坐 标 外 还 包括 名 称 、 地 址 等 属性 信息 。CustomLayer 类 提供 读 取 LBS 云 数 
据 的 接口 ,能够 自动 泻 染 用 户 数 据 并 生成 数据 图 层 , 同 时 提供 单 击 又 加 图 层 返 回 poi 数据 的 


功能 。 


除了 展示 用 户 自 有 数据 外 ,利用 JavaScript API 检索 接口 还 可 以 对 用 户 数 据 进行 检索 ， 
检索 类 型 包括 城市 内 检索 ,矩形 区 域 检 索 和 圆 形 区 域 检 索 。 
下 述 代 码 演示 了 使 用 圆 形 区 域 检 索 1000m 之 内 的 酒店 信息 。 
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【示例 】 创建 圆 形 检索 区 域 


// 创 建 圆 形 检索 区 域 ,并 设 定 其 颜色 以 及 透明 度 
var circle = new BMap. Circle(point, 1000, {fillColor:"blue", strokeWeight:1, 
fillOpacity:0. 08, strokeOpacity:0.5}); 
// 向 地 图 中 添加 圆 形 检索 区 域 
map. addOverlay(circle); 
// 创 建 地 图 检索 对 象 
Var local = new BMap. LocalSearch(map, 
{renderOptions: {map:map, autoViewport:false}}); 
// 添 加 检索 条 件 
local. searchNearby( ' 酒 店 ', point, 1000); 


上 述 代码 中 ,使 用 BMap. Circle() 方 法 来 创建 一 个 圆 形 检索 区 域 , 然 后 使 用 addOverlay() 
将 检索 区 域 添加 到 百度 地 图 中 , 接 下 来 使 用 BMap. LocalSearch( ) 方 法 来 创建 一 个 检索 对 象 
local ,通过 local 对 象 的 searchNearby() 方 法 来 实现 条 件 检索 。 

下 述 代码 演示 了 在 百度 地 图 中 添加 缩放 控件 ,并 使 用 圆 形 区 域 检 索 酒 店 信息 。 

【案例 12-10】 baidu02. html 


<!DOCTYPE html > 
< htm]l > 
< head > 
<meta charset = "UTF 一 8"> 
<title> 百 度 地 图 定位 </title> 
< style type = "text/css"> 
html{height:100%} 
body{ height :100 % ;margin:Opx;padding:0px} 
#container{height:100%} 
</style> 
< script type = "text/javascript" src = "http://api.map. baidu. com/getscript? 
v=2.0g&ak = 8245d15353728837399a8cc78e314f74"></script > 
</head> 
<body> 
<div id= "container"></div> 
<script> 
if(navigator. geolocation){ 
var options={ 
enableHighAcuracy:true 
}; 
navigator. geolocation. getCurrentPosition(successCallback, 
errorCallback, options); 
} elsef{ 
console. log( "位置 定 位 功能 不 可 用 ! '); 
} 
function successCallback(position){ 
var longitude = position. coords. longitude; 
var latitude = position. coords. latitude; 
var map = new BMap. Map( "container" ); 
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var point = new BMap. Point (longitude, latitude); 

Var marker = new BMap. Marker (point); 

map. addOverlay (marker); 

map. centerAndZoom( point, 15); 

map. enableScrollWheelZoom( ) ; 

// 向 地 图 中 添加 控件 

map. addControl (new BMap. NavigationControl()); 

map. addControl (new BMap. MapTypeControl( )); 

map. addControl (new BMap. OverviewMapControl()); 

// 创 建 圆 形 检索 区 域 ,并 设 定 其 颜色 以 及 透明 度 

var circle = new BMap. Circle(point, 1000, {fillColor:"blue", 
strokeWeight:1, fillOpacity:0. 08, strokeOpacity:0.5}); 

// 向 地 图 中 添加 圆 形 检索 区 域 

map. addOverlay(circle); 

// 创 建 地 图 检索 对 象 

Var local = new BMap. LocalSearch( map, 
{renderOptions: {map:map, autoViewport:false}}); 

// 添 加 检索 条 件 

local. searchNearby( ' 酒 店 ', point, 1000); 


} 
function errorCallback(error){ 
var errorType = { 
1:" 位 置 服务 被 拒绝 "， 
2:" 获 取 不 到 位 置信 息 "， 
3:" 获 取信 息 超时 "， 
4:" 未 知 错误 " 
| 
console. 1og(" 不 能 定位 您 的 当前 地 理 位 置 :" + errorType[ error. code]); 
二 
</script> 
</body> 
</html > 


上 述 代码 中 ,使 用 BMap. Map() 方 法 来 创建 一 个 Map 地 图 对 象 ,通过 map. addControl() 方 
法 向 地 图 中 添加 地 图 平移 缩放 控件 、 地 图 类 型 控件 和 缩 略 地 图 控件 。BMap. Circle() 方 法 用 
于 创建 一 个 圆 形 检 索 区 域 ,通过 local. searchNearby() 方 法 来 设置 检索 条 件 。 代 码 运 行 结果 
如 图 12-5 所 示 。 


全 > 除 本 节 所 讲述 的 功能 外 ,百度 地 图 还 提供 了 丰富 的 API 文档 ,更 多 功能 请 查阅 
3 http://lbsyun. baidu. com/index. php? title 二 jspopular; 百度 地 图 还 提供 了 大 量 的 
应 用 实例 ,读者 可 以 查阅 http://developer. baidu. com/map/jsdemo. htm。 
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图 12-5 地 图 条 件 检 索 


HTML 5 规范 中 新 增 了 Web Worker 技术 ,为 JavaScript 提供 了 一 种 多 线程 解决 
方案 。 

Worker 是 一 种 能 够 在 后 台 运 行 的 JavaScript 脚本 ,能够 独立 于 其 他 脚本 ,在 执行 时 
不 会 干扰 用 户 界 面 操作 。 

Worker 和 SharedWorker 接口 均 继承 自 AbstractWorker 接口 。 

Worker 接口 继承 了 AbstractWorker 接口 ,并 提供 了 terminate() 和 postMessage() 方 法 。 
在 HTML 5 中 ,Worker 线程 允许 嵌 套 子 线程 ,通过 线程 的 嵌 套 可 以 将 一 个 较 大 的 
任务 切 分 成 多 个 小 任务 ,然后 由 多 个 子 线程 分 别 进 行 处 理 , 以 提高 页 面 处 理 能 力 。 
SharedWorker 线程 拥有 一 个 connect 事件 ,在 每 次 获得 请 求 连接 时 就 会 触发 
connect 事件 ,在 事件 处 理 方 法 中 ,通过 ports 属性 来 获得 连接 SharedWorker 的 通 
信 端 口 ,使 用 该 端口 向 连接 请 求 者 发 送 消息 。 

地 理 位 置 (Geolocation) 是 HTML 5 规范 中 的 重要 特性 之 一 ,其 中 提供 了 关于 用 户 
位 置 的 地 理 定位 功能 ,通过 该 特性 可 以 实现 基于 位 置信 息 的 应 用 。 

HTML 5 中 的 geolocation 对 象 用 于 获取 客户 端的 当前 经 纬度 ,调用 百度 、 谷 歌 或 高 
德 地 图 API 接口 ,从 而 获得 客户 端 所 在 的 地 理 位 置 ,包括 省 市 区 信息 ,甚至 有 街道 、 
门牌 号 等 详细 的 地 理 位 置信 息 。 


本 章 练习 


1. HTML 5 中 新 增 了 Web Worker 技术 ,为 JavaScript 提供 了 一 种 多 线程 解决 方案 ， 
其 中 


和 接口 均 继承 自 AbstractWorker 接口 。 
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2. 在 Worker 接口 中 ， 方法 用 于 终止 当前 的 Web Worker 对 象 ， 方法 
用 于 在 线程 之 间 传 递 信息 。 

= 是 HTML 5 的 重要 特性 之 一 ,提供 了 关于 用 户 位 置 的 地 理 定位 功能 。 

4. 通过 浏览 器 的 对 象 来 获得 一 个 Geolocation 对 象 。 

5. 在 Geolocation 接口 中 ， 方法 用 于 获得 用 户 当 前 的 地 理 位 置信 息 ， 
方法 用 于 持续 获取 用 户 的 当前 地 理 位 置信 息 。 

6. 接口 提供 了 当前 地 理 位 置 的 经 度 、 纬 度 ,海拔 高 度 .海拔 精度 .设备 的 前 进 
方向 ,前进 速度 等 信息 。 

7. 请 简单 描述 一 下 Web Worker 所 使 用 的 场景 。 

8. 请 举例 说 明 Worker 线程 与 SharedWorker 线程 的 区 别 。 





Su 


HTML 5 新 增 和 痉 用 标签 | 


HTML 5 新 增 的 标签 见 表 A. 1, 弃 用 的 标签 见 表 A. 2。 


标签 类 型 


标 签 名 


表 A.1 HTML 5 新 增 的 标签 
说 明 





结构 标签 


section 


用 于 对 文章 的 内 容 进 行 分 块 ,如 章节 、 页 眉 、 页 脚 或 其 他 部 分 





article 


文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 \ 可 以 独自 被 外 部 引用 的 内 容 ， 
内 容 可 以 是 一 篇 文章 一 篇 短文 一 个 帖子 或 一 个 评论 等 





aside 


专门 用 于 定义 当前 页 面 或 当前 文章 的 附属 信息 ,可 以 包括 当前 页 面 或 当 
前 文章 的 相关 引用 、 侧 边栏 .广告 .导航 等 有 别 于 主要 内 容 的 部 分 





header 


用 于 定义 文章 的 页 由 信息, 可 以 包含 多 个 标题 .导航 部 分 和 普通 内 容 





hgroup 


用 于 对 标题 进行 分 组 





footer 


用 于 为 文章 定义 脚注 部 分 ,包括 文章 的 版 权 信息 、 作 者 授权 信息 等 





nav 


用 于 定义 页 面 上 的 各 种 导航 





figure 


用 于 定义 图 像 . 图 表 、 照 片 . 代 码 等 内 容 





figcaption 


用 于 定义 figure 元 素 的 标题 (caption) 





多 媒体 标签 


audio 


用 于 定义 音频 ,如 音乐 或 其 他 音频 流 





video 


用 于 定义 视频 ,如 电影 片段 或 其 他 视频 流 





source 


为 媒介 元 素 ( 如 < video > 或 < audio >) 定 义 媒介 资源 





track 


用 于 规定 字幕 文件 或 其 他 包含 文本 的 文件 ; 
当 媒 介 播 放 时 ,显示 文件 的 内 容 





embed 


典 入 内 容 ( 包 括 各 种 媒体 、 插 件 等 





输入 标签 


input:email 


用 于 输入 Email 地 址 的 文本 框 





input:url 


用 于 输入 URL 地 址 的 文本 框 





input:number 


用 于 输入 数值 的 文本 框 





input:range 


用 于 生成 一 个 数字 滑动 条 





input:color 


用 于 生成 一 个 颜色 选择 器 





input: search 


用 于 搜索 的 文本 框 





input: date 


用 于 选取 年 月 人 日 





input:month 


用 于 选取 年 月 





input: week 


用 于 选取 年 、 周 





input:time 


用 于 选取 时 间 ( 小 时 和 分 钟 》 








input: datetime 





用 于 选取 年 \ 月 \ 日 \ 时 ,分 、 秒 





标签 类 型 


标 签 名 
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续 表 
说 明 





其 他 页 面 


标签 类 型 


mark 


用 于 定义 突出 显示 或 高 亮 显示 的 文字 





Pprogress 


用 于 定义 任何 类 型 的 任务 的 进度 





meter 


用 来 度量 给 定 范围 (gauge) 内 的 数据 





time 


定义 一 个 公历 时 间 ,搜索 引擎 根据 < time > 标签 可 以 更 智能 地 搜索 





datalist 


用 于 定义 选项 列表 ,与 input 元 素 配合 使 用 





datagrid 


用 于 定义 可 选 数据 的 列表 ,作为 树 列 表 来 显示 





ruby 


用 于 定义 ruby 注释 (中 文 注音 或 字符 ) 





rt 


用 于 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 , 与 < ruby > 一 起 使 用 





Ip 


用 于 定义 不 支持 < ruby > 的 浏览 器 所 显示 的 内 容 





wbr 


用 于 规定 在 文本 中 的 何 处 适合 添加 换行 符 





details 


用 于 描述 文档 或 文档 某 个 部 分 的 细节 





summary 


用 于 包含 < details > 的 标题 部 分 





menu 


用 于 定义 命令 的 列表 或 菜单 





output 


用 于 定义 不 同类 型 的 输出 ,如 脚本 的 输出 





canvas 


用 于 定义 图 形 画 布 





dialog 


用 于 定义 对 话 框 或 窗口 





command 


用 于 定义 命令 按钮 ,如 单 选 按钮 . 复 选 框 或 按钮 





keygen 


标 签 名 





用 于 表单 的 密 钥 对 生成 器 字段; 
当 提 交 表 单 时 , 私 钥 存储 在 本 地 , 公 钥 发 送 到 服务 器 


表 A.2 HTML 5s 弃 用 的 标签 
说 明 





框架 标签 


frameset 


用 于 定义 框架 集 





frame 


用 于 定义 框架 集 的 窗口 或 框架 





noframes 


用 于 定义 针对 不 支持 框架 的 用 户 的 替代 内 容 





样式 标签 


basefont 


用 于 定义 页 面 中 文本 的 默认 字体 、 颜 色 或 尺寸 





big 


用 于 定义 大 号 文本 





center 


用 于 定义 居中 文本 





font 


用 于 定义 文字 的 字体 、 尺 寸 和 颜色 





S 


用 于 定义 加 删除 线 效果 的 文本 ,与 strike 功能 相同 ,是 其 缩写 形式 





strike 


用 于 定义 加 删除 线 效 果 的 文本 





tt 


用 于 定义 打字 机 文本 





u 


用 于 定义 下 面 线 文本 





其 他 页 面 
标签 


acronym 


用 于 定义 首 字母 缩写 ,可 使 用 < abbr > 标签 代替 





applet 


用 于 定义 嵌入 的 applet, 可 使 用 < embed > 或 < object > 标签 代替 





bgsound 


用 于 设置 页 面 背 景 音乐 ,可 使 用 < audio > 标签 代替 





blink 


用 于 设置 文本 闪烁 效果 





dir 


用 于 定义 目录 列表 ,可 用 < ul > 标签 替代 





marquee 


用 于 设置 页 面 的 自动 滚动 效果 ,可 由 JavaScript 编程 实现 





isindex 


用 于 定义 与 文档 相关 的 可 搜索 索引 





listing 


用 于 以 固定 字体 浑 染 文本 ,可 使 用 < pre > 标签 代替 








xmp 





用 于 定义 预 格式 文本 ,可 使 用 < code > 标签 代替 


‘%) 





NPM 工 具 | 


Node. js 是 一 个 基于 Chrome V8 引擎 的 JavaScript 运行 环境 ,采用 一 种 基于 事件 驱动 、 
非 阻塞 式 1/O 的 模型 ,使 其 轻 量 又 高 效 。NPM(Node Package Manager, 包 管理 器 ) 是 一 个 
由 Node.js 官方 (https://nodejs. org/en/) 提 供 的 第 三 方 包 管理 工具 ,也 是 目前 全 球 最 大 的 
开源 库 生 态 系 统 ,NPM 工具 适用 于 以 下 几 种 场景 。 

。 允许 用 户 从 NPM 服务 器 中 下 载 别 人 编写 的 第 三 方 包 到 本 地 使 用 ; 

。 允许 用 户 从 NPM 服务 器 中 下 载 并 安装 别人 编写 的 命令 行程 序 到 本 地 使 用 ; 

。 允许 用 户 将 自己 编写 的 包 或 命令 行程 序 上 传 到 NPM 服务 器 中 供 别 人 使 用 。 

由 于 新 版 的 Node.js 已 经 集成 了 npm 工具 , 故 在 安装 Node. js 时 会 将 npm 工具 一 起 安 
装 。 可 通过 输入 “npm -v” 命 令 来 测试 npm 工具 是 否 成 功 安装 , 当 显 示 版 本 提示 时 表示 npm 
工具 已 经 安装 成 功 。 

1. 使 用 npm 命令 安装 模块 

使 用 npm 命令 安装 Node. js 模块 ,语法 格式 如 下 。 

【语法 】 


npm install < Module Name > 


下 述 代码 演示 了 使 用 npm 命令 来 安装 express 框架 。 
【示例 】 npm 安装 express 框架 


npm install express 


在 安装 框架 模块 时 ,通常 将 该 模块 放置 到 工程 的 node_modules 目录 中 ,在 代码 中 只 需 
通过 require() 方 法 来 加 载 框 架 模 块 , 无 须 指定 模块 的 访问 路 径 。 

下 述 代 码 演 示 了 使 用 require() 方 法 来 加 载 express 框架 。 

【示例 】 在 代码 中 加 载 express 框架 


var express = require( 'express'); 


npm 的 包 安装 分 为 本 地 安装 (local) 和 全 局 安装 (global) 两 种 。 本 地 (局 部 ) 安 装 是 指 将 
安装 包 放 置 到 . /node_modules 目录 下 ( 即 运 行 npm 命令 时 位 于 的 目录 ), 如 果 node_ 
modules 目录 不 存在 ,npm 命令 会 在 当前 目录 下 创建 一 个 node_modules 目录 。 全 局 安装 是 
指 将 安装 包 放 置 到 /usr/local 目录 下 或 者 Node.js 的 安装 目录 下 ,使 用 全 局 安装 的 包 能 够 在 
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命令 行 中 以 控制 台 命令 的 形式 来 使 用 ,如 gulp、webpack 等 工具 应 以 全 局 形式 进行 安装 。 

当 npm install 命令 带 有 -8g 参数 时 表示 是 全 局 安装 , 当 npm install 命令 没有 带 -g 参数 
时 表示 是 局 部 安装 。 下 述 代 码 演示 包 的 全 局 安装 和 局 部 安装 。 

【示例 】 全 局 安装 和 局 部 安装 


# 全 局 安装 

npm install gulp - 9 
# 局 部 安装 

npm install express 


2. 查看 安装 信息 

使 用 npm 命令 安装 Node.js 模块 后 ,使 用 npm list 命令 来 查看 所 安装 的 全 局 模块 和 局 
部 模块 的 安装 位 置 和 版 本 信息 。 

【示例 】 查看 全 局 和 局 部 安装 信息 


# 查 看 全 局 安装 模块 
npm list gulp - g 
# 查 看 局 部 安装 模块 
npm list express 


运行 上 述 代 码 中 的 命令 后 ,所 显示 的 结果 如 下 所 示 。 


D:\VisualStudioCode\test > npm list gulp ~-g 
C:\Users\Administrator\AppData\Roaming\npm 
-— gulp@3.9.1 

D:\VisualStudioCode\test > npm list express 
test@1.0.0 D:\VisualStudioCode\test 

-—— express@4.15.4 


3. 更 新 模块 
使 用 npm update 命令 实现 安装 包 的 更 新 操作 ,语法 格式 如 下 。 
【语法 】 


npm update < Module Name > 
【示例 】 更 新 安装 包 


npm update gulp - g 
npm update express 


4. 拖 载 模块 
使 用 npm uninstall 命令 来 印 载 已 经 安装 的 Node. js 模块 。 
【语法 】 


npm uninstall < Module Name > 
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【示例 】 种 载 安装 包 


npm uninstall express 


5. 项 目 初始 化 

使 用 npm init 命令 对 项 目 进 行 初始 化 ,并 创建 一 个 package. json 文件 来 定义 该 项 目 中 
所 需要 的 各 种 模块 以 及 项 目的 配置 信息 (如 名 称 、 版 本 、 许 可 证 等 元 数据 )。 

【示例 】 package. json 


{ 

"name":"test", 
"version":"1.0.0", 
"description" :"project test", 
"main":"index. js", 
“scripte":{ 

"test":"echo \"Error: no test specified\" && exit 1" 
}, 
"keywords" :[ 

"project_test" 
], 
"author" :"jCuckoo"， 
"license" :"ISC" 


有 


使 用 npm install 时 ,通过 -save、--save-dev 等 参数 将 项 目 所 依赖 的 包 配置 到 package. 
json 文件 中 , 当 项 目 进行 部 署 或 迁移 时 ,直接 使 用 npm install 命令 完成 资源 包 的 安装 ,而 不 
需要 逐条 进行 安装 。 

参数 一 save 表示 将 安装 包 的 信息 配置 为 dependencies( 生 产 阶段 的 依赖 ) 模 式 。 

npm install express —- save 

在 package. json 文件 的 dependencies 位 置 , 添 加 相应 的 配置 。 

"dependencies":{ 


"express":"*4.15.4" 
} 


参数 --save-dev 表示 将 安装 包 的 信息 配置 为 devDependencies( 开 发 阶段 的 依赖 ) 模 式 ， 
一 般 在 开发 阶段 时 使 用 。 


npm install jade -- save— dev 
在 package. json 文件 的 devDependencies 字段 添加 相应 的 配置 。 
"devDependencies" :{ 


"jaden :we1.11.0" 
} 
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安装 express 和 jade 模块 之 后 的 package. json 文件 代码 如 下 所 示 。 
【示例 】 package. json 
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